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 関数のみを呼び出します。これは単にデフォルトの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

わかりました、動作する独自の少しハックなソリューションを作成しましたが、それは私のバージョンの 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 に答える