Prevent BODY from scrolling when a modal is opened

by

Bootstrap’s modal automatically adds the class modal-open to the body when a modal dialog is shown and removes it when the dialog is hidden. You can therefore add the following to your CSS:

body.modal-open {
    overflow: hidden;
}

You could argue that the code above belongs to the Bootstrap CSS code base, but this is an easy fix to add it to your site.

Update 8th feb, 2013
This has now stopped working in Twitter Bootstrap v. 2.3.0 — they no longer add the modal-open class to the body.

A workaround would be to add the class to the body when the modal is about to be shown, and remove it when the modal is closed:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

Update 11th march, 2013
Looks like the modal-open class will return in Bootstrap 3.0, explicitly for the purpose of preventing the scroll:

Reintroduces .modal-open on the body (so we can nuke the scroll there)

See this: https://github.com/twitter/bootstrap/pull/6342 – look at the Modal section.

More Related Contents:

  1. Scroll Function working in reverse order [closed]
  2. How can I make a div stick to the top of the screen once it’s been scrolled to?
  3. Keep overflow div scrolled to bottom unless user scrolls up
  4. Make scrollbar visible in mobile browsers
  5. Stop fixed position at footer
  6. Synchronized scrolling using jQuery?
  7. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  8. Reverse Scrolling
  9. How to do this mouse over effect in jquery?
  10. Download the text over image using jquery
  11. Replacing css file on the fly (and apply the new style to the page)
  12. Turn a number into star rating display using jQuery and CSS
  13. Instead of using prefixes I want to ask site visitors to upgrade their browser
  14. animating addClass/removeClass with jQuery
  15. Parsing CSS in JavaScript / jQuery
  16. Determine if an element has a CSS class with jQuery
  17. Show loading image while $.ajax is performed
  18. Scroll smoothly to specific element on page
  19. How to select all checkboxes with jQuery?
  20. css transition doesn’t work if element start hidden
  21. jquery – How to determine if a div changes its height or any css attribute?
  22. How to convert unordered list into nicely styled dropdown using jquery?
  23. Responsive horizontal page sliding
  24. Scale element proportional to Background Cover with jQuery
  25. Javascript: do an action after user is done scrolling
  26. CSS fade left to right
  27. How to stop user from printing webpages? using javascript or jquery
  28. Automatically scroll down chat div
  29. How can I compare two color values in jQuery/JavaScript?
  30. Removing element with jQuery?

Leave a Comment