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

Question

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

我怎样才能做到这一点？

Answer 1

更新

这是最初的答案:

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

这是工作解决方案:

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

Answer 2

为了澄清,Victor的答案仅在对话框设置为对话框autoOpen: true的默认值时才有效,并且您不会再次使用事件打开对话框.如果你打开对话框,类似的事件click在任何点是否autoOpen被设置为true或false,那么你必须使用jQuery.live.

小提琴演示叠加click事件的失败autoOpen: false:http://jsfiddle.net/GKfZM/

小提琴演示了如何live使用工作autoOpen: false,并与click事件:http://jsfiddle.net/GKfZM/1/

摘要: Victor的回答仅适用于某些条件.

教程链接

Answer 3

这种方式怎么样,这样你可以关闭对话框,无论它从哪里打开,哪个id.这是一个全球功能:

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