Open Modal Popup from another Modal Popup jQuery Modally

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.

Plugin Overview

Plugin: Modally
Author: Nikola Stamatovic
Licence: MIT Licence
Published: August 14, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 7.33 KB

How to To Use Modally to open Modal from another Modal Popup

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 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 advance configuration options to create / customize “modal popup from another modal popup”.

Option Description, Default, Type
max_width

This option define the CSS max width property for 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 weather to close parent modal when open new one. Default: false, Type: Boolean.
Possible Options are: true | false.

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

This option useful to close other opened modals. Default: false, Type: Boolean.
Possible Options are: true | false.

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