Prevent BODY from scrolling when a modal is opened

javascript jquery css scroll
xorinzor picture xorinzor · Mar 2, 2012 · Viewed 517k times · Source

I want my body to stop scrolling when using the mousewheel while the Modal (from http://twitter.github.com/bootstrap) on my website is opened.

I've tried to call the piece of javascript below when the modal is opened but without success

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

Please note our website dropped support for IE6, IE7+ needs to be compatible though.

Answer

MartinHN picture MartinHN · Jun 13, 2012

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.

Related questions

How can I make a div stick to the top of the screen once it's been scrolled to?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page.

Read More
Keep overflow div scrolled to bottom unless user scrolls up

I have a div that is only 300 pixels big and I want it to when the page loads scroll to the bottom of the content. This div has content dynamically added to it and needs to stay scrolled all the …

Read More
scrollTop jquery, scrolling to div with id?

So this is the current code I have $(document).ready(function() { $('.abouta').click(function(){ $('html, body').animate({scrollTop:308}, 'slow'); return false; }); $('.portfolioa').click(function(){ $('html, body').animate({scrollTop:708}, 'slow'); return false; }); $('.contacta').click(function(){ $('html, body').animate({…

Read More