我使用一个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;
});
发布于 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");
}
});
发布于 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。
发布于 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上测试了这一点。
https://stackoverflow.com/questions/3395016
复制相似问题