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);
  });
});