jQuery简单弹窗禁用滚动

Question

我在页面上有超过2000像素需要滚动的内容。

如果用户点击一个

，则一个可滚动的内容将在simplemodal窗口中弹出。现在我的客户希望在弹出模态窗口时使原始页面不可滚动。（当然，模态窗口仍应该可滚动。）

这是否可能？

编辑：我已经尝试了你们的建议。基本上是可以的，但问题有点复杂：

$(".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;
});

- smds45

Answer 1

在您的打开模态框的脚本中：

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

最后在关闭时：

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

（HTML和body标签是必须的，因为滚动条会附加到浏览器的不同部分，这取决于您使用的浏览器）

- Alex

---

好的，那其实就是我在答案中说的一样的 ;) - DarkLeafyGreen

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

- mhenry1384

---

仍然可以在Chrome中滚动，不过还是谢谢您的设置 :) - Joshua - Pendo

Answer 3

使用

overflow:hidden

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

- DarkLeafyGreen

Answer 4

我发现overflow:hidden并不是很好，因为如果页面滚动到一半，它会隐藏半透明覆盖层后面的内容。

我想出了以下比较复杂的解决方案。它以所有可能检测到的方式禁用滚动，并且如果页面仍然以某种方式滚动，则将滚动位置直接恢复到旧位置。

var popupOpened = false;

function openPopup()
{
    popupOpened = true;

    //catch middle mouse click scrolling
    $(document).bind('mousedown',disableMiddleMouseButtonScrolling);

    //catch other kinds of scrolling
    $(document).bind('mousewheel DOMMouseScroll wheel',disableNormalScroll);

    //catch any other kind of scroll (though the event wont be canceled, the scrolling will be undone)
    //IE8 needs this to be 'window'!
    $(window).bind('scroll',disableNormalScroll);

    $("#layover").css({"opacity" : "0.7"}).fadeIn();
    $("#popup").fadeIn(300,function()
    {
        //use document here for crossbrowser scrolltop!
        oldScrollTop = $(document).scrollTop();
    });
}

function closePopup()
{
    popupOpened = false;
    $("#layover").fadeOut();
    $("#popup").fadeOut(300,function(){
        $(document).unbind('mousedown',disableMiddleMouseButtonScrolling);
        $(document).unbind('mousewheel DOMMouseScroll wheel',disableNormalScroll);
        $(window).unbind('scroll',disableNormalScroll);
    });
}

function disableMiddleMouseButtonScrolling(e)
{
    if(e.which == 2)
    {
        e.preventDefault();
    }
    return false;
}

function disableNormalScroll(e)
{
    e.preventDefault();
    $('html, body').scrollTop(oldScrollTop);
    return false;
}

- Flion

Answer 5

这个选项非常好用：

document.documentElement.style.overflow = 'hidden';

- Artur INTECH

Answer 6

在我的情况下，在标签<a>中，参数href = "#" 。 因此解决方案是：

href="javascript:void(0);"

- user2642330

---

欢迎来到 Stack Overflow...但是这个答案并不是对所提出问题的解决方案。 - Amos M. Carpenter