首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery UI对话框-在对话框内滚动时,外部窗口滚动

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

Stack Overflow用户
提问于 2010-08-03 16:59:35
回答 3查看 12.1K关注 0票数 17

我使用一个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;
});
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2010-09-17 00:18:00

这是我使用的:

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

Stack Overflow用户

发布于 2010-08-03 23:40:45

像这样的东西可能会起作用(这是未经测试的):

<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>)

<body onscroll="scrolltop();" >

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

票数 2
EN

Stack Overflow用户

发布于 2013-01-10 19:25:10

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上测试了这一点。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3395016

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档