jQuery simplemodal禁用滚动

Question

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

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

它甚至可能吗？

编辑:我已经尝试了你的建议.基本上它可以工作,但问题有点复杂:

$(".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%)可以打开文章.使用上面的代码它按预期工作,但在关闭模式后我必须返回滚动条但这段代码不起作用:

$(".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 1

在你的脚本中打开你的模态:

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

并关闭:

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

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

Answer 2

打开和关闭滚动条将导致内容移动,叠加层将不再覆盖整个窗口.这是如何解决它.

var oldBodyMarginRight = $("body").css("margin-right");
$.modal(iframe, {
    onShow: function () {
        // Turn off scroll bars to prevent the scroll wheel from affecting the main page.  Make sure turning off the scrollbars doesn't shift the position of the content.
        // This solution works Chrome 12, Firefox 4, IE 7/8/9, and Safari 5.
        // It turns off the scroll bars, but doesn't prevent the scrolling, in Opera 11 and Safari 5.
        var body = $("body");
        var html = $("html");
        var oldBodyOuterWidth = body.outerWidth(true);
        var oldScrollTop = html.scrollTop();
        var newBodyOuterWidth;
        $("html").css("overflow-y", "hidden");
        newBodyOuterWidth = $("body").outerWidth(true);
        body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px");
        html.scrollTop(oldScrollTop); // necessary for Firefox
        $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px")
    },
    onClose: function () {
        var html = $("html");
        var oldScrollTop = html.scrollTop(); // necessary for Firefox.
        html.css("overflow-y", "").scrollTop(oldScrollTop);
        $("body").css("margin-right", oldBodyMarginRight);
        $.modal.close();
    }
});

Answer 3

使用

overflow:hidden

当模式对话框打开时将其应用到页面，并在对话框被销毁时将其删除。这将隐藏您的滚动条。