jQuery对话框，单击外部时关闭

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

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

---

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

也许这是过分的，但是试试看

$('.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");
            }
        );
    }
);

---

您可以给每个对话框一个类

然后选择它并在每个上运行，即使它没有打开，也可以继续运行：

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

---

给出的答案几乎有用。除了不能在使用

ui对话框

类的元素上调用

对话框（'close'）

。这是jquery用户界面围绕原始元素生成的内容，在调用

.dialog

时，必须对使用的原始元素调用close。幸运的是，jquery向它们添加了一个

ui对话框内容
类。用它来修改Guy的解决方案，您会得到：

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

你可以自己试试看

编辑：已更改
。由于执行此代码时，
ui小部件覆盖
可能还不存在，因此请单击
以
.live

编辑：更改为
.on
而不是
.live
，因为它被折旧了。
根据我的测试，这很有效

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

它关闭任何对话框。
UI代码已经为每个对话框提供了类
UI对话框
，如上所述。谢谢，我尝试了这个方法，但它似乎不起作用。通过Chrome开发工具，我可以看到这个对话框确实有一类ui对话框，所以不确定为什么它不起作用。当我指定ID时它会工作。好的，那么您可以尝试第二个示例吗？