如何通过单击框所覆盖区域外部来关闭jQuery UI模式对话框？

我正在使用jQuery 1.6和jQuery UI。 我成功实现了一个模式对话框窗口，其宽度几乎是我的应用程序网页宽度的50％。 我想给用户另一种关闭对话框的方法，这样当他点击“模态框”在页面上覆盖的区域之外时，这个将被关闭，好像用户点击了“标准”右上方的“x”按钮。

我怎样才能做到这一点？

Answer 1

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

使用autoOpen: false演示覆盖click事件失败的小提琴autoOpen: false ： http ： //jsfiddle.net/GKfZM/

小提琴演示如何使用autoOpen: false和click事件： http ： //jsfiddle.net/GKfZM/1/

摘要： Victor的答案仅适用于某些条件。

教程链接

Answer 2

更新

这是最初的答案：

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

这是工作解决方案：

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

Answer 3

这种方式怎么样，这样你可以关闭对话框，无论它从哪里打开，哪个id。 这是一个全球function：

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

Answer 4

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

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

要么

单击外部框时，可以直接使用单击事件

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