When closing one modal window to another with an attribute (data-dismiss = "modal"), Scroll appears in the second modal window

.card-card { border: 1px solid #d3d9de; border-radius: 2px; padding-top: 14px; margin-bottom: 20px; background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); } .card-t { border-top: 1px solid #d3d9de; padding-top: 10px; } .card-h { padding-bottom: 15px; } .buttons { padding-bottom: 15px; } .card-h img { width: 70%; height: auto; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <body> <div class="container-fluid content-card"> <div class="row"> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">Диагностика</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#diagnostics">ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅</button> </div> </div> </div> </div> <div class="modal fade" id="diagnostics"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title" style="text-align: center;">Диагностика Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠ° / ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> <div class="button-close" align="center"> <button type="button" class="btn btn-success" data-dismiss="modal" data-toggle="modal" data-target="#call">Π—Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π²ΠΎΠ½ΠΎΠΊ</button> </div> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> </div> </div> </div> </div> <div class="modal fade" id="call"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title" style="text-align: center;">ΠžΠ±Ρ€Π°Ρ‚Π½Π°Ρ связь</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> <form id="contact-form" method="post" action="contact.php" role="form"> <div class="messages"></div> <div class="controls"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="form_name">Имя <red>*</red></label> <input id="form_name" type="text" name="name" class="form-control" placeholder="Π’Π°ΡˆΠ΅ имя" required="required" data-error="Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ имя."> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_email">Email</label> <input id="form_email" type="email" name="email" class="form-control" placeholder="НС ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ"> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_phone">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹ΠΉ Π½ΠΎΠΌΠ΅Ρ€ <red>*</red></label> <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Π’Π°Ρˆ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹ΠΉ Π½ΠΎΠΌΠ΅Ρ€" required="required" data-error="Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹ΠΉ Π½ΠΎΠΌΠ΅Ρ€."> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="form_message">Π—Π°ΠΌΠ΅Ρ‚ΠΊΠ° </label> <textarea id="form_message" name="message" class="form-control" placeholder="ΠžΠΏΠΈΡˆΠΈΡ‚Π΅ Π²Π°ΡˆΡƒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅" rows="4"></textarea> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <input type="submit" class="btn btn-success btn-send" value="ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ"> </div> </div> </div> </form> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body>

  • If I expand the result of your code to full screen, it does not appear. Chrome. - Dmytryk February
  • In the example does not appear. The problem is clearly not in this code - Russian Bear
  • @RashenBear Example can be seen on the site test.expertpc.by - dragunov_m
  • @ Dmytryk Example can be seen on the site test.expertpc.by - dragunov_m

1 answer 1

While opening the 2nd dialog box, you do not need to change the body class. Because of this, the body changes the value of the overflow attribute, from hidden to visible . Or you need not to change, and add the class modal-open .

At the moment, when moving from the 1st window to the 2nd, his class changes from modal-open to style .

  • I also noticed that when opening the second modal window there is no class ". Modal-open", but I don’t understand now how to fix it. - dragunov_m
  • Need to know what code changes these classes - Dmytryk