jQuery simplemodal disable scrolling

smds45 picture smds45 · Mar 30, 2011 · Viewed 25.1k times · Source

I have more than 2000 pixels scrolling content on a page.

If the user clicks a div a scrolling content pops up in a simplemodal window. Now my client wants to make the original page non-scrollable while the modal window is up. (Of course the modal should be still scrollable.)

Is it even possible?

Edit: I have tried your suggestions. Basically it works, but the problem is a little bit complicated:

$(".foReadMoreLink a").click(function(){
    if ($('#modalBox').length == 0)
    $('body').append('<div style="display:none" id="modalBox"></div>')
    $('body').css({'overflow':'hidden'});
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
        $('#modalBox').html(data).modal({overlayClose:'true'});
    })
    return false;
});

I use return false on the links so bots and users without JavaScript (yes, that's 2%) can open the articles. With the code above it works as expected, but after closing the modal I have to have back the scrollbar but this code won't work:

$(".foReadMoreLink a").click(function(){
    if ($('#modalBox').length == 0)
    $('body').append('<div style="display:none" id="modalBox"></div>')
    $('body').css({'overflow':'hidden'});
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
        $('#modalBox').html(data).modal({onClose:function(){$('body').css({'overflow':'auto'})},overlayClose:'true'});
    })
    return false;
});

Answer

Alex picture Alex · Mar 30, 2011

In your script to open your modal:

$("html,body").css("overflow","hidden");

And on close:

$("html,body").css("overflow","auto");

(HTML and body are required as the scroll bars are attached to different parts of the browser depending on which you are using)