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;
});
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)