Question

我知道我可以使用以下命令通过单击外部关闭对话框：

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

但是我如何更改它以便它适用于每个对话框，即我想说关闭任何对话框，因为我们在页面上有多个并且更容易拥有一行代码？

Answer 1

也许这有点矫枉过正，但试试

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

您只需要在页面上运行一次此代码，live方法可以在您打开对话框时使其正常工作。

编辑：如果这不起作用，可能是.dialog的错。尝试

$('.ui-widget-overlay').live('click',
    function() {
        $(".ui-dialog").each(
            function() {
               $(this).dialog("close");
            }
        );
    }
);

Answer 2

您可以为每个对话框提供一个类

然后选择它并在每个上运行并且即使它未打开它也会起作用：

$('.ui-widget-overlay').click(function() { $(".dialogs").each(function()
 {$(this).dialog("close");}) });

Answer 3

答案几乎可行。除非您无法使用dialog('close')类调用ui-dialog元素。这是jquery-ui围绕原始元素生成的内容，并且必须在调用.dialog时使用的原始元素上调用close。幸运的是，jquery为它们添加了一个ui-dialog-content类。用它来修改盖伊的解决方案，你得到：

$(document).on('click', '.ui-widget-overlay', function() {
    $('.ui-dialog-content').each(function() {
       $(this).dialog('close'); 
    });
});

您可以在jsfiddle上亲自试用。

编辑：将.click更改为.live，因为执行此代码时ui-widget-overlay可能尚不存在。

编辑：由于已弃用，已更改为.on而不是.live。

Answer 4

从我的测试来看，这种方法运作良好。

$('[data-role=dialog]').dialog( "close" );

关闭任何对话框。

jQuery对话框，点击外面时关闭

4 个答案: