14

ソリューションの更新

しばらく検索した後、これを回避できると思います。私にとって、モーダル ダイアログを使用する唯一の機能は、その背後にある要素からのアクセスを防止することです。背後にオーバーレイがある非モーダルダイアログを使用するのと同じであることがわかりました。オーバーレイは、モーダル ダイアログになるというトリックを実行しただけです (ただし、完全な機能を備えたモーダルではありません)。

これが私の解決策です。ダイアログを初期化する前に、その前に div 要素を挿入し、div にui-widget-overlayクラスを与えます。.insertBefore()メソッドを使用して行われます。そして、ダイアログの「閉じる」イベントで、そのオーバーレイ div を削除します。ダイアログの「モーダル」オプションがfalseに設定されています。このソリューションを使用すると、モーダル ダイアログ (CKEditor ポップアップ) が 1 つしかないため、CKEditor ポップアップが正常に機能します。

jsfiddleのコード全体を次に示します。お役に立てれば。

jQueryを使用してダイアログを表示しています。このダイアログを modal mode に設定しました。そのダイアログ内に、CKEditor で使用されるテキストエリアを含めます。ダイアログを表示すると、テキストエリアが CKEditor によって適切に変換されます。しかし、画像を含めようとすると ( CKEditor は入力用に ITS OWN DIALOG を表示します)、URL 入力を使用できません。

これは、ダイアログを初期化するための私のコードです:

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: true
});

その構成では、テキストボックスをクリックして入力できません。

そして、モーダルを false に設定すると、動作するはずだとわかりました。

これはコードです：

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: false
});

そのコードでは、すべてが正常です。テキストボックスをクリックして入力できます。

モーダルモードを有効にする必要があるため、これが問題になります。CKEditor入力ダイアログをブロックするjQueryダイアログ（またはそれに類似したもの）からのz-indexが原因だと思います。誰でも私を助けることができますか？

4

5 に答える 5

4

最近（ちょうど今週）、私は同様の問題に遭遇していました。あなたが提供したjsfiddleであなたがしたことを正確に行うつもりでした。しかし、ダイアログ UI コードで何が起こっているのか、ページ内のマークアップで何が起こっているのかを調査して遊んだ後、私は最終的に何をする必要があるかを理解しました。

ウィジェット ファクトリと_allowInteraction関数がすべてです。

私にとっては、jQuery ダイアログでフィルタ付きの Sencha ExtJs グリッドを使用していました。グリッドは正常に機能しましたが、フィルター (テキスト ボックス フィルター) は機能しませんでした。これは、フィルターが表示されるときに、フィルターがダイアログ div または .ui-dialog タグの外にあるためです。

_allowInteraction関数のダイアログ UI コードを掘り下げると、次のようになります。

//From the jQuery dialog UI
_allowInteraction: function(event) {
    if($(event.target).closest('.ui-dialog').length) {
        return true;
    }

    // TODO: Remove hack when datepicker implements
    // the .ui-front logic (#8989)
    return !!$( event.target ).closest(".ui-datepicker").length;
}

私がする必要があったのは、次のコードを使用して、jQuery UI ファイルの後に JavaScript ファイルを追加することだけでした。

$.widget('ui.dialog', $.ui.dialog, {
    _allowInteraction: function( event ) {
        //This overrides the jQuery Dialog UI _allowInteraction to handle the sencha
        //extjs filter's not working.
        //this._super(event) passes onto the base jQuery UI
        return !!$( event.target ).closest( ".x-panel :input" ).length || this._super( event );
    }
}

ダイアログからフォーカスが失われるたびに_allowInteractionが発生するため、.x-panel :input を探す必要がありました。これがイベントを発生させたからです。

あなたの場合、CKEditor に最も近い要素が何であるかを確認するだけで済みます。この方法では、回避策を講じる必要はなく、ダイアログのモーダル オプションを true に設定するだけで済みます。これを行いたくない理由は、そのダイアログの上に別のダイアログを表示する場合です。オーバーレイの順序が間違っているか、間違った要素に追加されている可能性があります。ダイアログ UI には、それを処理するためのコードが既に含まれています。

$ .widget ( 'ui.dialog' , $.ui.dialog, function(){});を実行することによって サイトのすべての UI ダイアログに適用されます。

動作中のjsFiddleデモ

参照ポイント:

jQuery ダイアログ UI _allowInteraction

jQuery UI ウィジェット ファクトリ

于 2014-04-26T13:42:03.280 に答える