Whole page get shifted after modal popup


Topic: Whole page get shifted after modal popup

deanc asked 7 years ago

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">&times;</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

Hi, does your modal look like these ones: https://mdbootstrap.com/javascript/modals/? Best, Marta
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No