在背景点击的jQuery-UI关闭模式对话框

我正在使用jQuery UI，我喜欢这个演示的工作方式： http ： //jqueryui.com/demos/dialog/#modal-message

但是，当出现一个对话框时，关闭它的唯一方法是单击对话框中的一个界面按钮 – 当用户点击覆盖页面的背景图层时，如何将其扩展为关闭任何/给定的对话框？

我看到用户可以在哪里“逃脱”，但坦率地说，我认为大多数用户都不会想到这样做（直到我看到它作为一个选项我没有），但是他们可能会发现点击远离消息。

有没有我错过的事件/选项我可以使用？

Answer 1

这应该够了吧：

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

单击.ui-widget-overlay将触发关闭按钮的单击

干杯

G。

Answer 2

我发现以前有点挑剔，这是一个简单的修复：

 $(".ui-widget-overlay").live('click', function(){ $(".ui-dialog-titlebar-close").trigger('click'); }); 

Answer 3

这个肯定会起作用，因为当叠加在dom中时它很重要。

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

Answer 4

只是添加以防任何人遇到这个问题 – 如果你有多个对话框堆叠在一起，那么以下将关闭在顶部的对话框：

 $(".ui-widget-overlay").live("click", function () { $(".ui-dialog-titlebar-close", $(this).prev()).trigger('click'); }); 

Answer 5

这是在处理较新版本的Jquery时使用的首选方法。

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