用户界面 - 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 Inside。

Answer 1

如果您想知道为什么单击对话框中的任意位置后对话框就会关闭。您已经为整个文档添加了.click()事件侦听器，每次单击时，它都会运行您的回调函数overlayclickclose()。

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

if (closedialog)

由于closedialog总是1作为布尔值，任何单击任何地方都会关闭对话框。你的函数基本上会说if (true)做某事，所以总是"做某事"。

如果将焦点事件更改为：

closedialog = 0;

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

在这里看到它的工作

看到它无法像你在这里一样工作

---

快速搜索后，您正在使用的代码似乎与本教程非常相似 - 请参阅closedialog变量的1和0的使用。

---

还有另一种方法可以做到这一点，它可能更容易在代码中遵循。请参阅此处的问题。您可以将代码更改为如下所示的内容：

$('#mydialog').dialog({
    bgiframe: true,
    autoOpen: true,
    modal: true,
    width: 300,
    height: 200,
    resizable: false
});
$('.ui-widget-overlay').live('click', function() {
    $('#mydialog').dialog('close');
}); 

在这里看到它的工作

Answer 2

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