jQuery-UI 在背景点击时关闭模式对话框答案

【问题标题】：jQuery-UI close modal dialog on background clickjQuery-UI 在背景点击时关闭模式对话框
【发布时间】：2011-01-04 17:18:25
【问题描述】：

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

但是，当对话框出现时，关闭它的唯一方法是单击对话框内的一个界面按钮 - 当用户单击背景层覆盖时，我如何扩展它以关闭任何/给定对话框上页？

我看到用户可以在哪里点击“escape”，但坦率地说，我认为大多数用户不会想到这样做（直到我看到它作为一个选项我才想到），但是他们可能会点击离开来自消息。

是否有我错过的可以利用的事件/选项？

【问题讨论】：

【解决方案1】：

这应该可以解决问题：

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

点击.ui-widget-overlay会触发点击关闭按钮

干杯

G.

【讨论】：

【解决方案2】：

我发现以前的方法有时很挑剔，这里有一个简单的解决方法：

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

【讨论】：

你知道我不得不在这之后的几天问关于 live 的事情，呵呵。
在IE6环境下如何应用背景点击？目前它在我这边失败了。我正在使用最新的 [Github]github.com/jquery/jquery-ui/commit/…
根据我的测试，live更好！

【解决方案3】：

这个肯定会起作用，因为覆盖层是否在 dom 中很重要。

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

【讨论】：

【解决方案4】：

只是为了以防万一有人遇到这个问题 - 如果您有多个堆叠在一起的对话框，那么以下将关闭 just 顶部的对话框：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：