jQuery simplemodal禁用滚动 [英] jQuery simplemodal disable scrolling

问题描述

我在页面上滚动内容的像素超过2000.

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

如果用户单击div，则会在简单模式窗口中弹出滚动内容.现在，我的客户希望在模式窗口打开时使原始页面不可滚动. (当然，模态应该仍然可以滚动.)

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.)

有可能吗?

我已经尝试过您的建议.基本上可以，但是问题有点复杂:

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

我在链接上使用return false，因此没有JavaScript的漫游器和用户(是，那是2％)可以打开文章.上面的代码可以按预期工作，但是在关闭模式之后，我必须返回滚动条，但是此代码将无法工作:

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

推荐答案

在脚本中打开模态:

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

然后关闭:

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

(HTML和正文是必需的，因为滚动条将附加到浏览器的不同部分，具体取决于您所使用的语言)

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

这篇关于jQuery simplemodal禁用滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！