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

Question

我正在使用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');
});