web-dev-qa-db-ja.com

jQuery UI1.10がjqueryダイアログのzIndexオプションを削除する理由

JQuery UI（1.10）の最新バージョンでzIndexオプションが削除されていることがわかりました。そしてそれはjQueryのウェブサイトで確認されています。

本当にショックでした。これについて考えてください：

Jqgridがあり、editrow()またはaddrow()を使用して編集ダイアログを開いて何かを編集し、内部に多くのフィールドがあり、その一部には次のような自己定義のイベントがある場合、クリックすると、別のjQueryダイアログが表示され、選択するツリービューアイテムが表示されます。

JQuery UI 1.9（付属）では、jQueryダイアログのzIndexオプションをjqgrid編集ダイアログ（jqgrid編集ダイアログのサポートセットzIndex）よりも大きく設定できるため、jQueryダイアログは常にオンになります。見て使用することができます。

JQuery UI 1.10では、zIndexを設定できないため、jQueryダイアログは常にjqgrid編集ダイアログの背後にあります。

そのようなシーンは非常に一般的だと思います。

JQuery UI1.10がjQueryダイアログのzIndexオプションを削除するのはなぜですか？複数のダイアログがある場合にz-indexの順序を制御するにはどうすればよいですか？

jquerydialogz-index
18
ivanchain

私はあなたの問題を理解していると思います。 jQueryUIダイアログのCSSz-indexは、コンテンツの上に常に表示されるほど高くはありません。簡単な修正は次のとおりです。

/* A class used by the jQuery UI CSS framework for their dialogs. */
.ui-front {
    z-index:1000000 !important; /* The default is 100. !important overrides the default. */
}
26
BONER DAN

jQuery UI 1.1 から変更ログを読んでください（一緒に バグ それのために提出されました）：

zIndexオプションを削除しました

スタックオプションと同様に、適切なスタック実装ではzIndexオプションは不要です。 z-indexはCSSで定義されており、フォーカスされたダイアログがその親の最後の「スタッキング」要素であることを確認することで、スタッキングが制御されるようになりました。

言い換えると、zIndexオプションを使用してスタックする方法を「ハッキング」するのではなく、要素をプロパティスタックする必要があります。

6
MarcoK

ダイアログをインスタンス化するとすぐにjQueryを使用してzインデックスを適用する場合は、次の操作を実行できます。

$('#element').dialog({ your options... }).parent('.ui-dialog').css('zIndex',9999);
2
Robin Tang

やってみました？

$( ".selector" ).dialog( "moveToTop" );

参照： http://api.jqueryui.com/dialog/#method-moveToTop

0
Alain Gauthier

「appendTo」オプションを使用してみましたか？必要なもののz-indexを使用してラッパーを動的に追加し、その要素のIDを「appendTo」引数のセレクターとして使用します。

http://api.jqueryui.com/dialog/#option-appendTo

0
Dan Stotmeister