Prevent BODY from scrolling when a modal is opened

Question

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 1

Adding the class 'is-modal-open' or modifying style of body tag with javascript is okay and it will work as supposed to. But the problem we gonna face is when the body becomes overflow:hidden, it will jump to the top, ( scrollTop will become 0 ). This will become a usability issue later.

As a solution for this problem, instead of changing body tag overflow:hidden change it on html tag

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});

Answer 2

I'm not sure about this code, but it's worth a shot.

In jQuery:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

As I said before, I'm not 100% sure but try anyway.

Answer 3

I'm not 100% sure this will work with Bootstrap but worth a try - it worked with Remodal.js which can be found on github: http://vodkabears.github.io/remodal/ and it would make sense for the methods to be pretty similar.

To stop the page jumping to the top and also prevent the right shift of content add a class to the body when the modal is fired and set these CSS rules:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

It's the position:static and the height:auto that combine to stop the jumping of content to the right. The overflow-y:hidden; stops the page from being scrollable behind the modal.

Answer 4

Based on this fiddle: http://jsfiddle.net/dh834zgw/1/

the following snippet (using jquery) will disable the window scroll:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

And in your css:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

Now when you remove the modal, don't forget to remove the noscroll class on the html tag:

$('html').toggleClass('noscroll');

Answer 5

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 above code 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 Boostrap 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.

Answer 6

You could try setting body size to window size with overflow: hidden when modal is open