質問: (h - $(modal).outerHeight(true)) / 2; // モーダルコンテンツの表示位置を設定 $(modal).css({ 'left' : x + 'px', 'top' : y + 'px' }); } }); }); ```
回答: とりあえず明らかに「ああ動かないだろうな」というところだけ。 「ダイアログA」から「ダイアログB」を呼び出す、 重なりとしては最終的に以下のようになる想定。 z-index 大 ↑ |「ダイアログB」 |「ダイアログB用のオーバーレイ」 |「ダイアログA」 |「ダイアログA用のオーバーレイ」 |「body」 ↓ z-index 小 ``` // オーバーレイ用の要素を追加 $('body').append(''); // オーバーレイをフェードイン $('.modal-overlay').fadeIn('slow'); ``` ↓ ``` // オーバーレイ用の要素を追加 //★一旦変数に取る var $overlay = $(''); $('body').append($overlay); // オーバーレイをフェードイン //★ .modal-overlay だと、このclassが指定されている要素がすべて対象になる // = ダイアログA用のオーバーレイもダイアログB用のオーバーレイも対象になってしまう // 変数で指定すれば、上で生成したオーバーレイだけが対象になる $overlay.fadeIn('slow'); // ★以降も .modal-overlay で指定している箇所は変数 $overlay に差し替える ``` とかですかね。 あとはオーバーレイを重ねるなら z-index の指定をどうするか とかですかね 「ダイアログA」の上に「ダイアログB」を重ねるなら、 「ダイアログB用のオーバーレイ」は「ダイアログA」の上に重ならないと駄目ですよね