DEVELOPERS BLOGデベロッパーズブログ

  1. HOME > 
  2. 加藤 正人のデベロッパーズブログ > 
  3. jQuery UI Dialog と z-index

加藤 正人のデベロッパーズブログ

加藤 正人

氏名
加藤 正人
役職
多分SE
血液型
秘密
出没
美味しいもののあるところ
特色
タヒチ大好き。ちょいメタボ。

加藤 正人

2013/08/17

jQuery UI Dialog と z-index

 

最近は jQuery UI と他の jQuery プラグインを組み合わせて使用する機会が増えているのだが、たまにツール間の設定の衝突で正しく表示されないことがある。

今回は jQuery UI Dialog の利用するベースレイヤが、画像にオーバーラップするレイヤより下位にあったためスクリプトエラーは何も表示されないのにダイアログが表示されないという現象になった。

結局 Chrome や Firefox の開発ツールで z-index 値を調査し、オーバーラップするレイヤ群の z-index より大きな値を jQuery UI Dialog のベースレイヤに指定するよう

<style type="text/css">
.ui-front {
	z-index: 1000;
}
</style>

というスタイル定義を追加することで対応できた。

関連タグ: jQueryUI  jQuery 

関連エントリー