【jQuery】Try creating a modal window within a modal

2023-11-22

Using the jQuery plugins "Magnific Popup", which I personally use often, and "Colorbox", which I occasionally see, I will try creating a modal window within a modal window.

First, let's try creating a modal within a modal using only Magnific Popup

I will try creating a multi-level modal window using only Magnific Popup.

Here it is

Open Magnific Popup Modal

This is a modal window by Magnific Popup.

Open Magnific Popup Modal within Modal

This is a modal window within a modal by Magnific Popup.

If you open the first modal, then open and close the second modal, all modals close. (That's obvious, isn't it?)

Open Source Code

The first button, the first modal, and the second modal are arranged.

<p><a href="#mfp_modal" class="mfp">Open Modal</a></p>

<div id="mfp_modal" class="mfp_modal mfp-hide">
	<p>This is a modal window.</p>
	<p><a href="#mfp_modal2" class="mfp">Open Magnific Popup Modal within Modal</a></p>
</div>

<div id="mfp_modal2" class="mfp_modal mfp-hide">
	<p>This is a modal window within a modal by Magnific Popup.</p>
</div>

The JS is only for Magnific Popup.

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

Next, let's try creating a modal within a modal using only Colorbox

Next, I will try creating a multi-level modal window using only Colorbox.

Here it is

Open Colorbox Modal

This is a modal window by Colorbox.

Open Colorbox Modal within Modal

This is a modal window within a modal by Colorbox.

Similar to Magnific Popup, if you open the first one, then open and close the second one, everything closes.

Open Source Code

The first button, the first modal, and the second modal are arranged.

<p><a href="#cb_modal1" class="cb_modal">Open Colorbox Modal</a></p>

<div class="cb_modal_wrap">
	<div id="cb_modal1" class="colorbox_modal">
		<p>This is a modal window by Colorbox.</p>
		<p><a href="#cb_modal2" class="cb_modal">Open Colorbox Modal within Modal</a></p>
	</div>
</div>

<div class="cb_modal_wrap">
	<div id="colorbox2" class="colorbox_modal">
		<p>This is a modal window within a modal by Colorbox.</p>
	</div>
</div>

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

【Conclusion】Let's try combining Magnific Popup and Colorbox

Since one plugin alone doesn't work well, I will try creating a multi-level modal window by combining Magnific Popup and Colorbox.

First, the pattern where the first is Magnific Popup, and the second is Colorbox.

Here it is

Open Magnific Popup Modal

This is a modal window by Magnific Popup.

Open Colorbox Modal within Modal

This is a modal window within a modal by Colorbox.

I think it's working well! Exactly ideal!

The first button, the first Magnific Popup modal, and the second Colorbox modal are arranged.

<p><a href="#mfp_modal3" class="mfp">Open Magnific Popup Modal</a></p>

<div id="mfp_modal3" class="mfp_modal mfp-hide">
	<p>This is a modal window by Magnific Popup.</p>
	<p><a href="#cb_modal3" class="cb_modal">Open Colorbox Modal within Modal</a></p>
</div>

<div class="cb_modal_wrap">
	<div id="cb_modal3" class="colorbox_modal">
		<p>This is a modal window within a modal by Colorbox.</p>
	</div>
</div>

Both Magnific Popup and Colorbox JS are being executed.

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

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

Reverse

I will try the pattern where the first is Colorbox, and the second is Magnific Popup.

Here it is

Open Colorbox Modal

This is a modal window by Colorbox.

Open Magnific Popup Modal within Modal

This is a modal window within a modal by Magnific Popup.

Here, the second Magnific Popup modal is displayed behind.

It's just a matter of fixing the CSS, but unless there's a specific reason, it seems better to put Colorbox inside Magnific Popup.

Open Source Code

The first button, the first Magnific Popup modal, and the second Colorbox modal are arranged.

<div id="mfp_modal4" class="mfp_modal mfp-hide">
	<p>This is a modal window within a modal by Magnific Popup.</p>
</div>

<p><a href="#cb_modal4" class="cb_modal">Open Colorbox Modal</a></p>

<div class="cb_modal_wrap">
	<div id="cb_modal4" class="colorbox_modal">
		<p>This is a modal window by Colorbox.</p>
		<p><a href="#mfp_modal4" class="mfp">Open Magnific Popup Modal within Modal</a></p>
	</div>
</div>

<div id="mfp_modal4" class="mfp_modal mfp-hide">
	<p>This is a modal window within a modal by Magnific Popup.</p>
</div>

Both Magnific Popup and Colorbox JS

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

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

I believe there are also plugin compatibilities, but by placing Colorbox inside Magnific Popup, I was able to create a modal window within a modal window.

I hope this is helpful.

Comments

If this was helpful, we appreciate your support!
Your support will be used for childcare.

Or support us by buying something from the buttons below
(You don't have to buy the linked product.)

Amazon

楽天市場

Yahoo!ショッピング