在背景点击的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');
});

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');
});