Topic: Whole page get shifted after modal popup
I tried modap popup window and it's working fine but when I close popup window, whole web page get shift on left side about 10px. This keep on repeating and every time I close window it add more 10px so I get 20px margin second time 30px margin third time and so on, on right side. Is anyone know why this happen??
<section class="my-5"> <div class="modal fade my-5" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-bold">Write to us</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form"> <i class="fa fa-user prefix grey-text"></i> <input type="text" id="form3" class="form-control validate"> <label data-error="wrong" data-success="right" for="form3">Your name</label> </div> <div class="md-form"> <i class="fa fa-envelope prefix grey-text"></i> <input type="email" id="form2" class="form-control validate"> <label data-error="wrong" data-success="right" for="form2">Your email</label> </div> <div class="md-form"> <i class="fa fa-tag prefix grey-text"></i> <input type="text" id="form32" class="form-control validate"> <label data-error="wrong" data-success="right" for="form34">Subject</label> </div> <div class="md-form"> <i class="fa fa-pencil prefix grey-text"></i> <textarea type="text" id="form8" class="md-textarea" style="height: 100px"></textarea> <label data-error="wrong" data-success="right" for="form8">Your message</label> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button class="btn btn-unique">Send <i class="fa fa-paper-plane-o ml-1"></i></button> </div> </div> </div> </div> <div class="container-fluid pb-5 pt-5" style="background-color:#F5F5F5"> <h3 class="h2-responsive text-center mb-3 wow fadeIn">Are you ready to start?</h3> <div class="text-center wow fadeIn"> <a id="pro-content-question" class="btn btn-outline-info btn-lg waves-effect waves-light" data-toggle="modal" data-target="#modalContactForm">Question? Write to us! <i class="fa fa-envelope ml-1"></i></a> <a id="pro-content-buy" class="btn btn-info btn-lg waves-effect waves-light" href="#mdb-cta">Buy now <i class="fa fa-cart-plus ml-1"></i></a> </div> </div> </section>
Marta Szymanska staff pro premium answered 7 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No