【发布时间】：2011-07-20 17:54:44
【问题描述】：
我正在构建一个广泛使用 jQuery UI 对话框的应用程序。我在一次打开多个对话框时遇到了一个问题，如果可能的话，我真的不知道如何解决它。
基本上是这样的：
- 用户打开对话框
A（顶部：100px，高度：300px） - 用户打开对话框
B（顶部：100px，高度：300px） - 用户关闭对话框
A - 对话框
A向上移动后打开的所有对话框。例如：对话框Btop属性减去对话框Aheight(100px - 300px = -200px)：对话框消失。
我通过使用 Firebug Inspect 和 Web Developer 得出了这个结论。
如果对话框B（在对话框A之后打开）先关闭，则不会出现问题。我也尝试过使用 vanilla UI（即：没有加载除 jQuery 之外的样式表），但它仍然会发生。对话框关闭时似乎有一个我无法覆盖的触发器。
使用 position: fixed; （由 @TheVillageIdiot 建议）修复它，但在对话框被销毁时仍然会发生。 p>
这是一个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<div id="dialog-1">
</div>
<div id="dialog-2">
</div>
<script type="text/javascript">
$('#dialog-1').dialog({
close: function() {
$(this).dialog('destroy');
},
height: 300,
position: [100, 100],
show: 'scale',
hide: 'drop',
resizable: false,
title: 'A',
});
$('#dialog-2').dialog({
close: function() {
$(this).dialog('destroy');
},
height: 300,
position: [100, 100],
show: 'scale',
hide: 'drop',
resizable: false,
title: 'B',
});
</script>
</body>
</html>
非常感谢任何建议。
【问题讨论】：
-
您应该显示代码。关闭处理程序可能有问题？
-
我认为当顶部对话框关闭时，它后面的其他对话框会重新流动。您是否尝试过使用
position:fixed进行对话？ -
@spacevillain：我会的，但老实说，这是 jQuery UI Dialog 最基本的用法。
-
@TheVillageIdiot：它有效，但我发现了问题（但不是解决方案）。即使位置是
fixed，当对话框被销毁时，它仍然会发生。 -
添加示例代码（您可以按原样实际尝试）。
标签： javascript jquery jquery-ui dialog jquery-ui-dialog