jQuery UI 模态对话框在单击自身时关闭

Question

我的页面中有一个模式弹出窗口，当我单击该对话框中的任何控件时它会自行关闭，下面是代码：

function overlayclickclose() {
    if (closedialog) {
        jQuery('#mydialog').dialog('close');
    }
}
closedialog = 1;

jQuery('#mydialog').dialog({
    bgiframe: true,
    autoOpen: false,
    modal: true,
    width: 900,
    height: 400,
    resizable: false,
    open: function() {
        closedialog = 1;
        jQuery(document).bind('click', overlayclickclose);
    },
    focus: function() {
        closedialog = 1;
    },
    close: function() {
        jQuery(document).unbind('click');
    }
});

当我在任何地方单击该模式对话框时，它会关闭，因此我无法对其进行操作。我该如何解决？

请注意，我的 div 位于更新面板中，并将ASP.NET 的用户控件放入其中。

Answer 1

如果您想在单击对话框中的任意位置时立即知道对话框关闭的原因。你已经为整个文档添加了一个.click()事件监听器，每次点击都会运行你的回调函数overlayclickclose()。

这是检查是否要关闭对话框：

if (closedialog)

因为closedialog 始终是1，它作为布尔值是true，任何点击任何地方都会关闭对话框。你的函数基本上会说if (true)做某事，所以总是“做某事”。

如果您将焦点事件更改为：

closedialog = 0;

关闭对话框现在是0，作为布尔值是flase，所以对话框不会关闭。

See it working here

See it not working as you have it here

---

快速搜索后，您使用的代码看起来与 this tutorial 非常相似 - 请参阅 1 和 0 的用法，了解 closedialog 变量。

---

还有另一种方法可以做到这一点，它可能更容易在代码中遵循。 See the question here。你可以把你的代码改成这样：

$('#mydialog').dialog({
    bgiframe: true,
    autoOpen: true,
    modal: true,
    width: 300,
    height: 200,
    resizable: false
});

$('.ui-widget-overlay').live('click', function() {
    $('#mydialog').dialog('close');
}); 

See it working here

Answer 2

如果问题是“为什么单击其中的元素时此对话框会关闭？”，那么答案是来自子元素的单击事件正在传播到父元素。请参阅 event.stopPropagation() 了解如何阻止这种情况发生的详细信息。我希望这会有所帮助。