Menu
I am working on a site using Bootstrap 3.1.0.
You'll notice when the modal window opens, the browser scroll bar just disappears for a split second, then comes back. It does the same when you close it.
How can I make it so that it just open and closes with no browser scroll bar interaction. I have seen posts on stack where people were having problems, but I can't find an answer specific to my problem, so if someone else has made this request and someone knows about it and wants to link me to it, I'd appreciate it. I've searched for about 2 hours for this before posting up.
260
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.
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.
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.
modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The . close class styles the close button, and the . modal-title class styles the header with a proper line-height.
.modal { overflow-y: auto; } .modal-open { overflow: auto; } Will get rid of it. This was added to make the modals work more responsively, so you could scroll down and see a modal if the screen was too short. It also stops the background from being scrollable while a modal is up. If you don't need that functionality, then you can use that css I posted.
Some more info: They are setting .modal-open on the body, which prevents all scrolling on the body and hides the body scrollbar. Then, when the modal comes up it has the dark background that takes up the whole screen, and that has overflow-y: scroll which forces the scrollbar to come back so if the modal extended passed the bottom of the screen you can still scroll the dark background and see the rest of it.
123
Fixing the shifting left issue is easily done using CSS alone.
.modal-open[style] { padding-right: 0px !important; } You're just overwriting an inline style that exists in the code. I am using mine in a WordPress build and the inline style was being applied to the body. Looked like this:
<body class="home blog logged-in modal-open" style="padding-right: 15px;"> Hope this helps someone!
38
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
