如何通过点击弹出框外部区域来关闭jQuery UI模态对话框？

Question

我正在使用jQuery 1.6和jQuery UI。我成功地实现了一个模态对话框窗口，其宽度几乎是应用程序网页宽度的50％。我想为用户提供另一种关闭对话框的方法，以便当他/她单击页面上“模态框”覆盖区域之外的区域时，这个对话框将被关闭，就像用户单击该位置右上角的“标准”“x”按钮一样。 我该怎么做？

- Backo

Answer 1

更新

以下是最初的回答：

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

这是可行的解决方案：

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

- Victor

---

在我的情况下，我应该使用jQuery.live方法。谢谢。 - Backo

Answer 2

这样做的话，无论从哪里和哪个ID打开对话框，您都可以关闭它。 这是一个全局函数：

   $("body").on("click",".ui-widget-overlay",function() {
     $(".ui-dialog-titlebar-close").click();
   });

- Ken

Answer 3

为了澄清，Victor的答案仅在对话框设置为autoOpen:true时才有效，这是对话框的默认值，并且您不会使用事件再次打开对话框。如果您在任何时候使用click等事件打开对话框，无论autoOpen是否设置为true或false，都必须使用jQuery.live。

演示覆盖click事件失败的Fiddle，其中autoOpen:false：http://jsfiddle.net/GKfZM/ 演示live如何在autoOpen:false和click事件下工作的Fiddle：http://jsfiddle.net/GKfZM/1/ 总结： Victor的答案只适用于特定条件。

教程链接

- jk.

---

请注意，自jQuery版本1.7起，live()方法已被弃用，您应该使用on()方法代替。 - ithil

Answer 4

关闭模态对话框有两个选项

$('#your-dialog-id').modal('toggle');

或者

当您在框外单击时，可以直接使用点击事件

$("#your-dialog-id .close").click()

- Nikunj K.