jQuery UI对话框-外部窗口在对话框内部滚动时滚动

我正在使用一个对话框显示一个包含页面的弹出窗口。当我在弹出窗口内滚动时，如果滚动条到达底部，则父页面开始滚动。在对话框内滚动时，如何限制父页面滚动

我使用以下代码创建了一个模态对话框

// Dialog
$('#dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 550,
    minHeight: 500,
    maxHeight: 800,
    minWidth: 500,
    maxWidth: 900,
    modal: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$('#AddNewItems').click(function () {
    var currentURL = getURLOfCurrentPage();
    $('#dialog').dialog('open');
    $("#dialog").dialog("option", "width", 800);
    $("#dialog").dialog("option", "height", 550);
    $("#dialog").dialog( "option", "draggable", false );
    $("#dialog").dialog( "option", "modal", true );
    $("#dialog").dialog( "option", "resizable", false );
    $('#dialog').dialog("option", "title", 'My Title');
    $("#modalIframeId").attr("src", "http://myUrl");
    return false;
});

---

类似的方法可能会奏效（这是未经测试的）：

var stop_scroll=false；
函数scrolltop（）{
如果（停止滚动==真）{
卷轴（0,0）；
//或窗口。滚动到（0,0）；
}
}

在您的body标签中（

）

最后，打开对话框时将“停止”滚动设置为true，关闭对话框时将其设置为false。

这就是我使用的：

$('#dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 550,
    minHeight: 500,
    maxHeight: 800,
    minWidth: 500,
    maxWidth: 900,
    modal: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open: function(){
        $("body").css("overflow", "hidden");
    },
    close: function(){
        $("body").css("overflow", "auto");
    }
});

---

古伦8的解决方案最适合我。然而，我需要一种在全球范围内做到这一点的方法。我的应用程序在多个页面上使用对话框，我不想更新所有实例

以下代码将处理所有对话框的打开和关闭：

$('body').on('dialogopen', '.ui-dialog-content', function () {
    var $dialog = $(this);
    var $body = $('body');
    var height = $body.height();

    // Hide the main scrollbar while the dialog is visible. This will prevent the main window
    // from scrolling if the user reaches the end of the dialog's scrollbar.
    $body.css('overflow', 'hidden');

    // Calling resize on the dialog so that the overlay is resized for the scrollbars that are now hidden.
    $dialog.resize().on('dialogclose', function () {
        // Show the main scrollbars and unbind the close event handler, as if the
        // dialog is shown again, we don't want the handler to fire multiple times.
        $body.css('overflow', 'auto');
        $dialog.off('dialogclose');
    });
});

---

我使用的是v1.8.23。我在InternetExplorer8、InternetExplorer9、Firefox17和Chrome19中对此进行了测试。

谢谢。它工作得很好。但是Scroll（0,0）给出了一个跳跃和闪烁的行为。我不能调用preventDefault（）之类的函数并取消事件吗？我想你不能（如果我错了，有人可以纠正我）。我相信只有当滚动开始时才会调用该事件，而不是在它发生之前。这就是我们将滚动位置移回（0,0）的原因。在我们进入我们的活动之前，它已经移动了。很高兴你发现它很有用。真是个好主意。从来没有想过要像那样隐藏身体的溢出物。做得好！我使用了一个类似的技巧，使用位置固定/绝对而不是溢出，但是这开始在FF中引起问题，非常感谢+1。在主流浏览器中绝对不起作用。2015年7月，伟大的解决方案。我在寻找另一个问题，我偶然发现了这个有用的答案。在一些对话框中使用scroll太无聊了，这个解决方案解决了这个问题。谢谢，我用这个做了一些修改。首先，我抓取主体的

右填充

，并将其设置为滚动条的宽度（在将溢出更改为隐藏之后）。这可以防止页面在背景中移动，这会使人迷失方向。在对话框关闭时，我将

填充还原为右

。第二，在做任何事情之前，我测试主体的

溢出

是否已经

隐藏

，如果是，我什么也不做。如果同时打开两个对话框，则可能发生这种情况。

$('#dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 550,
    minHeight: 500,
    maxHeight: 800,
    minWidth: 500,
    maxWidth: 900,
    modal: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open: function(){
        $("body").css("overflow", "hidden");
    },
    close: function(){
        $("body").css("overflow", "auto");
    }
});

$('body').on('dialogopen', '.ui-dialog-content', function () {
    var $dialog = $(this);
    var $body = $('body');
    var height = $body.height();

    // Hide the main scrollbar while the dialog is visible. This will prevent the main window
    // from scrolling if the user reaches the end of the dialog's scrollbar.
    $body.css('overflow', 'hidden');

    // Calling resize on the dialog so that the overlay is resized for the scrollbars that are now hidden.
    $dialog.resize().on('dialogclose', function () {
        // Show the main scrollbars and unbind the close event handler, as if the
        // dialog is shown again, we don't want the handler to fire multiple times.
        $body.css('overflow', 'auto');
        $dialog.off('dialogclose');
    });
});