Javascript jQuery UI模式对话框覆盖时全局关闭单击

我有几个模态对话框在我的页面，将有更多。我计划使用模态对话框为他们所有，并让他们关闭覆盖点击。我不想在我实例化对话框的每个地方都绑定overlay click事件，所以我想扩展对话框原型或类似的东西，使其全局绑定所有模态对话框的click事件

假设我有以下对话框构造函数：

$('#dialog').dialog({
    modal: true,
    open: function()
    {
        $(this).find('input[type=text]').focus();
    }
});

我已尝试将此代码置于对话框实例化之前：

$.extend(
    $.ui.dialog.prototype.options,
    {
        open: function()
        {
            var dialog = this;
            $('.ui-widget-overlay').on('click', function()
            {
                $(dialog).dialog('close');
            });
        }
    }
);

但是它不起作用，jQuery只调用对话框参数中传递的open函数。我怀疑这只是改变了默认的open函数，传递给构造函数的任何内容都会覆盖它

$.widget(
    "ui.dialog",
    $.ui.dialog,
    {
        open: function()
        {
            this._super();
            var dialog = this;
            $('.ui-widget-overlay').on('click', function()
            {
                $(dialog).dialog('close');
            });
        }
    }
);

这也行不通；jQuery抛出一个错误——“在初始化之前无法调用对话框上的方法；试图调用方法‘close’”——即使弹出窗口是打开的。 如何使覆盖单击关闭事件是全局的且不可覆盖

---

另外，为什么jQueryUI库不提供这个？我认为这是一个非常流行的东西。

它不是最重要的，但您可以收听文档中的某些事件：

$(function() {
  var theDialog;
  $( document ).on("click",
    ".ui-widget-overlay",function(){
      $(theDialog).dialog("close");
  });
  $( document ).on( "dialogopen", function( event, ui ) {
    theDialog=$(event.target);
  });
});

---

好的，我自己做了一个略显粗糙的解决方案，但它似乎只适用于我的jQuery版本（1.10.3）。我用JSFIDLE提供的jQueryUI1.9.2尝试了完全相同的代码，但它根本没有调用该函数。我猜函数名在1.10中被重命名了

不管怎样，代码如下：

$.widget(
    'ui.dialog',
    $.ui.dialog,
    {
        _createOverlay: function()
        {
            this._super();

            if (!this.options.modal)
            {
                return;
            }

            this._on(this.overlay, { click: 'close' });
        }
    }
);

和测试小提琴：

必须向它添加外部jQueryUI1.10.3CDN链接以使其工作，但嘿-至少它可以工作，而且这是一个非常简单的解决方案，只需深入jQueryUI的代码以找到最简单的方法即可

顺便说一句，这只需要很少的努力就可以构建到对话框插件本身中，值得注意的是没有人这么做。您需要做的就是添加一个选项来启用/禁用覆盖单击时关闭，如果该选项已启用，则“我的函数”中的最后一行将检查该选项是否已启用，总共最多4行

---

编辑：为当前jQuery用户界面创建了一个补丁：

此处接受答案的最后一部分是否有帮助@克丽丝看到这把小提琴了吗。根本不起作用。此对话框未本地化。我只想修改对话框或扩展jQuery对话框插件本身。