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

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

Answer 2

如果您想在对话框中的任何位置单击后立即知道对话框关闭的原因。您已为整个文档添加了.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

jQuery UI模式对话框在单击时关闭

2 个答案: