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


jQuery UI modal dialog global close on overlay click

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

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

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

1
2
3
4
5
6
7
$('#dialog').dialog({
    modal: true,
    open: function()
    {
        $(this).find('input[type=text]').focus();
    }
});

我尝试将这段代码放在对话框实例化之前：

1
2
3
4
5
6
7
8
9
10
11
12
13
$.extend(
    $.ui.dialog.prototype.options,
    {
        open: function()
        {
            var dialog = this;
            $('.ui-widget-overlay').on('click', function()
            {
                $(dialog).dialog('close');
            });
        }
    }
);

但它不起作用，jQuery仅调用在对话框参数中传递的open函数。我怀疑这只会更改默认的打开函数，而传递给构造函数的任何内容都将覆盖此函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.widget(
   "ui.dialog",
    $.ui.dialog,
    {
        open: function()
        {
            this._super();
            var dialog = this;
            $('.ui-widget-overlay').on('click', function()
            {
                $(dialog).dialog('close');
            });
        }
    }
);

这也不起作用； jQuery吐出一个错误-"初始化前无法在对话框上调用方法；??试图打开方法\\'close \\'"-即使弹出窗口处于打开状态。
我怎么做才能使覆盖层点击

相关讨论

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

无论如何，这是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$.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。只需很少的努力就可以将其内置到对话框插件中，这是很明显的，没有人做过。您需要做的就是添加一个选项，以启用/禁用重叠点击关闭功能，以及我函数的最后一行(如果检查该选项是否已启用)，总计IF。 4行。

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

这不是优先级，但是您可以听文档上的某些事件：

1
2
3
4
5
6
7
8
9
10
$(function() {
  var theDialog;
  $( document ).on("click",
   ".ui-widget-overlay",function(){
      $(theDialog).dialog("close");
  });
  $( document ).on("dialogopen", function( event, ui ) {
    theDialog=$(event.target);
  });
});
相关讨论