Menu
I have a modal and within that modal, there is a dropdown that displays large hidden content, which is working.
Now when you open the next modal, stacked on top of the first modal and dismiss it, the scrolling on modal underneath becomes disabled.
I have created a full example, including the steps to replicate the issue I am facing. You can see it here.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <title></title> <style> </style> </head> <body> <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" > <div class="modal fade" id="modal_1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">First Modal</h4> </div> <div class="modal-body"> <form class="form"> <div class="form-group"> <label>1) Open This First: </label> <input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" > </div> <div class="form-group"> <label>2) Change this once you have opened the modal above.</label> <select id="change" class="form-control"> <option value="small">Show Small Content</option> <option value="large">Show Large Content</option> </select> </div> <div id="large" class='content-div'> <label>Large Textarea Content.. Try and scroll to the bottom..</label> <textarea rows="30" class="form-control"></textarea> </div> <div id="small" class='content-div'> <label> Example Text Box</label> <input type="text" class="form-control"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="modal_2"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Second Modal</h4> </div> <div class="modal-body"> <hp>This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... </h5> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $(".content-div").hide(); $("#change").change(function() { $(".content-div").hide(); $("#" + $(this).val()).show(); }); }); </script> </html> Here's a Bootply to show the behaviour in action:
Bootply
683
Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.
Approach: A simple solution to this problem is to set the value of the “overflow” property of the body element to “hidden” whenever the modal is opened, which disables the scroll on the selected element.
Use the . modal-dialog-scrollable class to enable scrolling inside the modal.
When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.
This is also a solution
.modal { overflow-y:auto; } http://www.bootply.com/LZBqdq2jl5
Auto works fine :) This will actually fix any modal that runs higher than your screen size.
93
This is because when you close a modal, it removes the modal-open from the <body> tag. Bootstrap doesn't support multiple modals on the same page (At least until BS3).
One way to make it work, is to use the hidden.bs.modal event triggered by BS when closing a modal, then check if there is anyother modal open in order to force the modal-open class on the body.
// Hack to enable multiple modals by making sure the .modal-open class // is set to the <body> when there is at least one modal open left $('body').on('hidden.bs.modal', function () { if($('.modal.in').length > 0) { $('body').addClass('modal-open'); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
