1

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

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 库提供的？我认为这是非常受欢迎的事情。

4

2 回答 2

2

好的，我做了我自己的有点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 中检查该选项是否启用的我的函数的最后一行，总共最多。4行。

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

于 2013-11-01T11:59:59.870 回答
0

它不是压倒一切的，但您可以收听文档上的某些事件：

$(function() {
  var theDialog;
  $( document ).on("click",
    ".ui-widget-overlay",function(){
      $(theDialog).dialog("close");
  });
  $( document ).on( "dialogopen", function( event, ui ) {
    theDialog=$(event.target);
  });
});
于 2013-10-30T18:42:19.170 回答