Question

我正在使用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;
});

Answer 1

这就是我使用的：

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

Answer 2

这样的事情可能有用（这是未经测试的）：

<script type="text/javascript" language="Javascript">
    var stop_scroll = false;
    function scrolltop(){
        if(stop_scroll == true){
            scroll(0,0);
            // Or window.scrollTo(0,0);
        }
    }
</script>

在您的正文标记（<body></body>）

中

<body onscroll="scrolltop();" >

最后，打开对话框时将stop_scroll设置为true，关闭对话框时设置为false。

Answer 3

gurun8的解决方案对我来说效果最好。但是，我需要一种全球范围内的方法。我的应用程序在多个页面上使用对话框，我不想更新所有实例。

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

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

我正在使用jQuery v1.8.23。我在Internet Explorer 8，Internet Explorer 9，Firefox 17和Chrome 19中进行了测试。

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

3 个答案: