Open Modal Popup from another Modal

Open Modal Popup from another Modal Popup jQuery Modally
Code Snippet:Modally
Author: Nikola Stamatovic
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 10,664
License: MIT
Edit Code online: View on CodePen
Read More

The Modally is a well-designed and lightweight jQuery plugin that helps you to create nested modals (open modal popup from another modal popup). It comes with some configuration options to customize the working of the plugin. You can set custom width & CSS styles. Moreover, this plugin doesn’t require any other external library except jQuery.

How To Create Modal Popup that Open from another Modal

1. Load jQuery JavaScript library and Modally’s CSS and JavaScript files in your web project.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Modally CSS -->
<link rel="stylesheet" href="css/jquery.modally.css">

<!-- Modally JS -->
<script type="text/javascript" src="js/jquery.modally.js"></script>

2. After loading all assets, create some modals (with unique id) as the following HTML structure.

<div id="lorem" modally-max_width="1000">
   <h1 class="modal-title serif">Hey there!</h1>
   <p>Content of modal one. </p>
   <div class="button-wrap">
      <a target="_modal:close" class="button small">Close me!</a><a href="#ipsum" target="_modal" class="button gradient small">Open 2nd one!</a>
   </div>
</div>
<div id="ipsum">
   <h1 class="modal-title serif">You still here?!</h1>
   <p>Content of modal two. </p>
   <div class="button-wrap">
      <a class="button small modally-close">Close me!</a><a href="#dolor" target="_modal:open" class="button gradient small">Open 3rd one!</a>
   </div>
</div>
<div id="dolor" modally-max_width="500">
   <h1 class="modal-title serif">I'm the last one.</h1>
   <p>Content of Modal three. </p>
   <div class="button-wrap">
      <a href="#dolor" target="_modal:close" class="button gradient small">Close me!</a>
   </div>
</div>

3. In the final step, initialize all modals in the jQuery document ready function.

jQuery(document).ready(function () {
	$('#ipsum').modally('ipsum', {
		max_width: 800
	});
	$('#lorem').modally();
	$('#dolor').modally();
});

Advance Configuration Options for Nested Popup Modal

The following are some advanced configuration options to create/customize “modal popup from another modal popup”.

Option Description, Default, Type
max_width This option defines the CSS max-width property for the modal window. Default: ‘none’, Type: String | Number.
Possible Options are: any valid value of CSS max-width.

$('#id').modally({
   max_width: 600,
});
vertical_align Define CSS vertical-align property. Default: ‘middle’, Type: String.

$('#id').modally({
   vertical_align: 'middle'
});
close_parent Decide whether to close parent modal when opening a new one. Default: false, Type: Boolean.
Possible Options are: true | false.

$('#id').modally({
   close_parent: false,
});
close_other This option is useful to close other opened modals. Default: false, Type: Boolean.
Possible Options are: true | false.

$('#id').modally({
   close_other: false,
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...