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

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

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

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

Answer 1

你可以给每个对话一个class级

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

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

Answer 2

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

 $('.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 3

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

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

它关闭任何对话框。