jQuery UI 1.10: ダイアログとzIndexオプション

画像がクリックされたときに表示されるダイアログを作る必要があります。問題は、非常に大きなz-index（例えば500）があり、UIダイアログがその要素の後ろにあることです。

このページでは、ユーザー名："raducup"、パス名："1"でログインする必要があります。もう一つの問題は、ダイアログの「閉じる」をクリックすると、オブジェクトが消えてしまうことです。

これは、画像がクリックされたときに呼び出す関数です。

function openItem(obiect){
    $( obiect ).css('zIndex',9999);
    $( obiect ).dialog({
        dialogClass: "no-close",
        modal: true,
        draggable: true,
        overlay: "background-color: red; opacity: 0.5",
        buttons: [
            {
                text: "OK",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
    reparaZindex();
}
Irvin Dominin
編集された質問 13日 3月 2014 в 3:09
プログラミング
javascript html jquery css jquery-ui
4日 6月 2013 в 12:09
まだビューはありません
ソリューション

伝えていませんが、jQuery UI 1.10を使用しています。

jQuery UI 1.10では、zIndexオプションが削除されています。

zIndexオプションの削除

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

この場合、純粋なCSSを使用してダイアログを"on the top"に設定する必要があります。

.ui-dialog { z-index: 1000 !important ;}

要素のデフォルトのスタイリングを上書きするには、キー !important が必要です。これはすべてのダイアログに影響しますので、ダイアログだけに設定する必要がある場合は、dialogClass オプションを使用してスタイリングしてください。

モーダルなダイアログが必要な場合は、docsを参照して modal: true オプションを設定してください。

trueに設定すると、ダイアログはモーダルな動作をします。 ページの他の項目は無効になり、つまり操作できなくなります。モーダル ダイアログは、ダイアログの下にオーバーレイを作成しますが、他のページ 要素の上にオーバーレイを作成します。

モーダルオーバーレイを使用するためには、より高いz-indexを設定する必要があります。

.ui-front { z-index: 1000 !important; }

を使用してください。

Irvin Dominin
編集した答え 13日 3月 2014 в 12:19
解説 (7)

CSSを入れる。

 .ui-dialog { z-index: 1000 !important ;}
Rajiv007
編集した答え 4日 6月 2013 в 12:23
解説 (7)

ダイアログを呼び出す前にこれを追加

$( obiect ).css('zIndex',9999);

と削除します。

 zIndex: 700,

ダイアログから

解説 (4)