Question

我正在构建一个广泛使用jQuery UI对话框的应用程序。我遇到了一次打开多个对话框时发生的问题，如果可能的话，无法真正弄清楚如何修复它。

基本上，它是这样的：

用户打开对话框A（顶部：100px，高度：300px）
用户打开对话框B（顶部：100px，高度：300px）
用户关闭对话框A
对话框A向上移动后打开的所有对话框。例如：对话框B top属性子对话框A height（100px - 300px = -200px）：对话框消失。

我通过使用Firebug Inspect和Web Developer得出了这个结论。

如果首先关闭对话框B（在对话框A之后打开），则不会出现问题。我也尝试过使用vanilla UI（即：除了jQuery之外没有样式表），它仍然会发生。当对话框关闭但我无法覆盖时，似乎有一个触发器。

使用 position: fixed; （正如 @TheVillageIdiot 所建议的）修复了它，但在对话框被销毁时仍然会发生。

以下是一个例子：

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

非常感谢任何建议。

Answer 1

这可能是因为您的对话框不在position: absolute中，因此对话框B的位置（即顶部：X）是相对于对话框{{1}的位置（顶部：Y）计算的}}。

因此，假设对话框B的绝对位置为A，对话框A为top: 20px，对话框top: 10px的指定CSS位置将为B，因为它是相对的对话top: 10px。因此，当对话框A被销毁时，对话框A（B）的位置变得相对于对话框top: 10px之前的元素，很可能更高，因此向上你的窗口。

解决方案非常简单：将对话框CSS A属性设置为position。 jQuery UI应该赶上并正确计算位置。

P.S。：只需确保在加载jQuery UI CSS样式表后定义CSS绝对位置，以确保你的覆盖jQuery的。

Answer 2

从UI的角度来看，我有点担心你会同时触发多个对话框。在UI模式中，一些研究得出结论，模态对话非常具有破坏性，因此理想情况下，它应该用于绝对必须中断其余过程以使某些事情发生或警告用户的情况。连续对话后进行对话可能会在非模态环境中的向导等模式中更好地完成。

或者，有多个通知小部件可以很好地完成这类工作。例如：

http://www.erichynds.com/examples/jquery-notify/

http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/

好的，就是说，我已经做了几次，特别是当我提醒用户正在发生进程然后告诉他们进程成功/失败时。解决方案是抛出一个，销毁它，然后依次实例化其他的，而不是抛弃它们并销毁它们。这可以通过jQuery对话框代码本身中的按钮单击来完成，例如您需要用户交互的示例，或者可以通过服务器端脚本自动完成，该脚本“告知”UI在通知流程时销毁一个并构建另一个。无论哪种方式，实例化一个旨在多次创建单个元素然后期望它“堆叠”的脚本就会引发所有浏览器问题（咳嗽，咳嗽IE）的错误。

jQuery - 当一个人被关闭/被摧毁时，对话就会消失

2 个答案: