モーダルウィンドウを重ねて表示

Question

jqueryに関する質問です。
以下のコードを用いて表示されたモーダルウィンドウ1の上に重ねて別のモーダルウィンドウ2を表示させたいです。
以下のコードのIDとClass名だけを変更してモーダルウィンドウ2を作成しました。
しかし、モーダルウィンドウ2が表示されるとモーダルウィンドウ1が消えてしまいます。
「.modal-overlay」あるいは「.modal-close」をクリックというコメント付近のコードを削除すると、問題は解決しますが、当然モーダルを閉じることができなくなってしまいます。
どうすればこの問題を解決できるか教えてください。

$(function() {
	// 「#modal-open」をクリック
	$('.modal-open').click(function() {
		// オーバーレイ用の要素を追加
		$('body').append('<div class="modal-overlay"></div>');
		// オーバーレイをフェードイン
		$('.modal-overlay').fadeIn('slow');

		// モーダルコンテンツのIDを取得
		var modal = '#' + $(this).attr('data-target');
		// モーダルコンテンツの表示位置を設定
		modalResize();
		// モーダルコンテンツフェードイン
		$(modal).fadeIn('slow');

		// 「.modal-overlay」あるいは「.modal-close」をクリック
		$('.modal-overlay, #modal-close').off().click(function() {
			// モーダルコンテンツとオーバーレイをフェードアウト
			$(modal).fadeOut('slow');
			$('.modal-overlay').fadeOut('slow', function() {
				// オーバーレイを削除
				$('.modal-overlay').remove();
			});
		});

		// リサイズしたら表示位置を再取得
		$(window).on('resize', function() {
			modalResize();
		});

		// モーダルコンテンツの表示位置を設定する関数
		function modalResize() {
			// ウィンドウの横幅、高さを取得
			var w = $(window).width();
			var h = $(window).height();

			// モーダルコンテンツの表示位置を取得
			var x = (w - $(modal).outerWidth(true)) / 2;
			var y = (h - $(modal).outerHeight(true)) / 2;

			// モーダルコンテンツの表示位置を設定
			$(modal).css({
				'left' : x + 'px',
				'top' : y + 'px'
			});
		}

	});
});

Comments

[sk_3122]

モーダルダイアログの中から さらにモーダルダイアログを呼ぶ感じでしょうか？ jQuery 部分だけじゃなくて html 部分の動くソースもあると試しやすいのですが。 class="modal-open" を指定したトリガ、と data-target="モーダルとして表示するべき要素のID"、ですかね…？

[sk_3122]

ああ、CSSもないと駄目ですかね。要は、動くソースがあれば 実際に試してみて おかしいところを指摘しやすいということです。ソースだけ見て机上デバッグするよりその方が楽なので、回答も付きやすいかと思います。

Answer 1

とりあえず明らかに「ああ動かないだろうな」というところだけ。
「ダイアログA」から「ダイアログB」を呼び出す、

重なりとしては最終的に以下のようになる想定。

z-index 大
↑
｜「ダイアログB」
｜「ダイアログB用のオーバーレイ」
｜「ダイアログA」
｜「ダイアログA用のオーバーレイ」
｜「body」
↓
z-index 小

// オーバーレイ用の要素を追加
$('body').append('<div class="modal-overlay"></div>');

// オーバーレイをフェードイン
$('.modal-overlay').fadeIn('slow');

↓

// オーバーレイ用の要素を追加
//★一旦変数に取る
var $overlay = $('<div class="modal-overlay"></div>');
$('body').append($overlay);

// オーバーレイをフェードイン
//★ .modal-overlay だと、このclassが指定されている要素がすべて対象になる
//   = ダイアログA用のオーバーレイもダイアログB用のオーバーレイも対象になってしまう
//   変数で指定すれば、上で生成したオーバーレイだけが対象になる
$overlay.fadeIn('slow');

// ★以降も .modal-overlay で指定している箇所は変数 $overlay に差し替える

とかですかね。

あとはオーバーレイを重ねるなら z-index の指定をどうするか とかですかね
「ダイアログA」の上に「ダイアログB」を重ねるなら、
「ダイアログB用のオーバーレイ」は「ダイアログA」の上に重ならないと駄目ですよね

Answer 2

モーダルの考え方は、親ウィンドウより優先的に処理される子ウィンドウですから
モーダルを開いている間は親ウィンドウを操作できないので
別のモーダルを開くということは理論的にありえないのでは？
アラートが出ている最中に別のアラートがだせないのと同じです