Bootstrap Modal Makes Scrollbar Disappear After Closing

Bootstrap modal makes scrollbar disappear after closing

I had the same problem.
Bootstrap add modal-open class in the body, but does not remove when the modal is closed.
I solved just adding in callback:

$('body').removeClass('modal-open');

bootstrap modal removes scroll bar

This is a feature, class modal-open gets added to the HTML body when you show the modal, and removed when you hide it.

This makes the scrollbar disappear since the bootstrap css says

.modal-open {
    overflow: hidden;
}

You can override this by specifying

.modal-open {
    overflow: scroll;
}

in your own css.

Background scrollbar disappears when opening modal

Every time the Modal opens, class .modal-open is added to the body tag - and this class contains overflow:hidden.

This can be fixed by adding this:

.modal-open {
  overflow: inherit;
}

Now you'll find that opening the Modal suddenly causes a scroll to the bottom; which is also why the Button was disappearing from view on every click...

You'll probably have to experiment further to prevent the scrolling from happening, it could be because the div or something in it gets focus just before it is shown as a modal.

Scrollbar disappearing when use modal on Bootstrap

Add

divName.modal-open {
   overflow: scroll;
  }

this will work in v3 of bootstrap

Modal Closes, but scroll bar doesn't come back

To help anyone else who may run into this. Upon further inspection of the DOM after the modal closed I noticed that body still had this class applied: ".modal-open".

Removal of this class would bring the page back to normal conditions. The following simple line of code attached to the onclick event solved this issue (although I still haven't figured out the underlying cause).

$('body').removeClass('modal-open');

---

Related Topics