画像がクリックされたときに表示されるダイアログを作る必要があります。問題は、非常に大きな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();
}
伝えていませんが、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; }
を使用してください。