DEVELOPERS BLOGデベロッパーズブログ
- HOME >
- 加藤 正人のデベロッパーズブログ >
- jQuery UI Dialog と z-index
加藤 正人のデベロッパーズブログ
- 氏名
- 加藤 正人
- 役職
- 多分ＳＥ
- 血液型
- 秘密
- 出没
- 美味しいもののあるところ
- 特色
- タヒチ大好き。ちょいメタボ。
- 2020/12/15
- CakePHP3 のリダイレクトがうまく行かない例
- 2020/11/12
- Apache Bench
- 2020/10/05
- PhpSpreadsheet でExcel ファイルを読み込む (CakePHP3)
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>
というスタイル定義を追加することで対応できた。
関連エントリー
- 2017/07/08
- 時刻入力用 jQuery Plugin TimePicki の不具合調整
- 2017/04/30
- jQuery プラグイン「Touch Punch」
- 2016/03/12
- Safari のフォームボタンと jQuery submit()
- 2015/12/19
- スマホ向けサイトの click と touch
- 2015/06/27
- jQuery 無限スクロールのメモ
- 2014/10/11
- Google Chart へのアクセスをヘルパーで実装してみる【その２】
- 2014/02/22
- IE8 と style 値でハマった話
- 2014/02/11
- jQuery UI の tooltip を select 要素に使用する際の注意
- 2013/06/01
- jQuery UI ボタンと IE8 のワナ
- 2013/05/17
- jQuery v2 は IE6/7/8 をサポートしない！
- 2013/03/09
- JavaScript でバリデーション
- 2013/02/23
- JavaScript で入力フィールドの文字カウンタを実装してみる
名古屋オフィス 東京オフィス
入力例：CSS、ポータルサイトなど
2020/12/15
2020/11/12
2020/10/05
2020/09/11
2020/08/03
