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

NLV*_*NLV 17 jquery scroll jquery-ui jquery-ui-dialog

我正在使用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;
});
Run Code Online (Sandbox Code Playgroud)

gur*_*un8 23

这是我使用的:

$('#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");
    }
});
Run Code Online (Sandbox Code Playgroud)