【jQuery】モーダル内モーダルウィンドウを作ってみる

まずはMagnific Popupだけでモーダル内モーダルを作ってみる

Magnific Popupだけで多重モーダルウィンドウを作ってみます｡

それがこちら

Magnific Popupモーダルを開く

1つ目のモーダルを開いて､2つ目のモーダルを開いて閉じると､すべてのモーダルが閉じられてしまいますね｡ (当たり前...ですかね｡)

<p><a href="#mfp_modal" class="mfp">モーダルを開く</a></p>

<div id="mfp_modal" class="mfp_modal mfp-hide">
	<p>モーダルウィンドウです｡</p>
	<p><a href="#mfp_modal2" class="mfp">Magnific Popupによるモーダル内モーダルを開く</a></p>
</div>

<div id="mfp_modal2" class="mfp_modal mfp-hide">
	<p>Magnific Popupによるモーダル内モーダルウィンドウです｡</p>
</div>

$(".mfp").magnificPopup({
	type: "inline"
});

次にColorboxだけでモーダル内モーダルを作ってみる

次に､Colorboxだけで多重モーダルウィンドウを作ってみます｡

それがこちら

Colorboxモーダルを開く

こちらもMagnific Popupと同様､1つ目を開いて2つ目を開いて閉じると､すべて閉じてしまいます｡

<p><a href="#cb_modal1" class="cb_modal">Colorboxモーダルを開く</a></p>

<div class="cb_modal_wrap">
	<div id="cb_modal1" class="colorbox_modal">
		<p>Colorboxによるモーダルウィンドウです｡</p>
		<p><a href="#cb_modal2" class="cb_modal">Colorboxモーダル内モーダルを開く</a></p>
	</div>
</div>

<div class="cb_modal_wrap">
	<div id="colorbox2" class="colorbox_modal">
		<p>Colorboxによるモーダル内モーダルウィンドウです｡</p>
	</div>
</div>

$(".cb_modal").colorbox({
	inline: true
});

【結論】Magnific PopupとColorboxを組み合わせてみる

1つのプラグインだけだと上手くいかないので､Magnific PopupとColorboxを組み合わせて多重モーダルウィンドウを作ってみます｡

まず､1つ目がMagnific Popup､2つ目がColorboxのパターン｡

それがこちら

Magnific Popupモーダルを開く

うまく動いていると思います！まさに理想的！

最初のボタンと､1つ目のMagnific Popupモーダル､2つ目のColorboxモーダルを並べています｡

<p><a href="#mfp_modal3" class="mfp">Magnific Popupモーダルを開く</a></p>

<div id="mfp_modal3" class="mfp_modal mfp-hide">
	<p>Magnific Popupによるモーダルウィンドウです｡</p>
	<p><a href="#cb_modal3" class="cb_modal">Colorboxモーダル内モーダルを開く</a></p>
</div>

<div class="cb_modal_wrap">
	<div id="cb_modal3" class="colorbox_modal">
		<p>Colorboxによるモーダル内モーダルウィンドウです｡</p>
	</div>
</div>

JSはMagnific PopupとColorboxの両方実行しています｡

$(".mfp").magnificPopup({
	type: "inline",
	preloader: false
});

$(".cb_modal").colorbox({
	inline: true
});

<div id="mfp_modal4" class="mfp_modal mfp-hide">
	<p>Magnific Popupによるモーダル内モーダルウィンドウです｡</p>
</div>

<p><a href="#cb_modal4" class="cb_modal">Colorboxモーダルを開く</a></p>

<div class="cb_modal_wrap">
	<div id="cb_modal4" class="colorbox_modal">
		<p>Colorboxによるモーダルウィンドウです｡</p>
		<p><a href="#mfp_modal4" class="mfp">Magnific Popupモーダル内モーダルを開く</a></p>
	</div>
</div>

<div id="mfp_modal4" class="mfp_modal mfp-hide">
	<p>Magnific Popupによるモーダル内モーダルウィンドウです｡</p>
</div>

$(".mfp").magnificPopup({
	type: "inline",
	preloader: false
});

$(".cb_modal").colorbox({
	inline: true
});

コメント