Question

我的页面中有几个模态对话框，还会有更多。我打算为它们使用模态对话框，并在叠加点击时关闭它们。我不想在我实例化对话框的每个地方绑定覆盖点击事件，所以我想扩展对话框原型或类似的东西，使其全局绑定所有模态对话框的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'” - 即使弹出窗口是打开的。我怎么能这样做叠加点击＆amp;关闭事件是全局的而不是可以覆盖的？

P.S。为什么这不是由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的代码，找出最简单的方法做到这一点。

P.S。这需要花费很少的精力才能构建到对话框插件本身中，很明显没人会这样做。你需要做的就是添加一个选项来启用/禁用覆盖点击关闭和我的函数的最后一行，它检查是否启用了该选项，总共最多。 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);
  });
});

jQuery UI模式对话框全局关闭叠加点击

2 个答案: