jQuery UI模态对话框全局单击覆盖关闭

Question

我的页面上有几个模式对话框，将来还会有更多。 我计划对它们全部使用模式对话框，并在单击叠加时关闭它们。 我不想在实例化对话框的每个地方都绑定overlay click事件，所以我想扩展对话框原型或类似的东西，使其在所有模式对话框中全局绑定click事件。

http://jsfiddle.net/jurchiks/kLBJm/1/

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

$('#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函数。 我怀疑这只会更改默认的打开函数，而传递给构造函数的任何内容都将覆盖此函数。

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

这也不起作用； jQuery吐出一个错误-“在初始化之前无法在对话框上调用方法；​​试图调用方法'close'”-即使弹出窗口处于打开状态。 我该如何做才能使覆盖点击和关闭事件是全局且不可替代的？

PS为什么jQuery UI库没有提供此功能？ 我认为这很受欢迎。

Answer 1

好的，我制定了自己的略带hackish的解决方案，但似乎只适用于我的jQuery（1.10.3）版本。 我使用jsfiddle提供的jQuery UI 1.9.2尝试了完全相同的代码，但它只是没有调用该函数。 我猜函数名称已在1.10中重命名。

无论如何，这是代码：

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

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

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

和测试提琴： http : //jsfiddle.net/jurchiks/R944y/1/

不得不向其添加外部jQuery UI 1.10.3 CDN链接以使其正常运行，但是-至少它可以正常运行，并且这是一个非常简单的解决方案，只需要深入研究jQuery UI的代码以找出最简单的方法即可。

PS这将花费很少的精力构建到对话框插件本身中，这是很明显的，没有人做。 您所需要做的就是添加一个选项，以启用/禁用重叠点击关闭功能；如果要检查该选项是否启用，我的函数的最后一行在IF中，总计为max。 4行。

编辑：为当前的jQuery UI创建了一个补丁： https : //gist.github.com/jurchiks/7264596

Answer 2

这不是覆盖，但是您可以听文档上的某些事件：

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