Simple jQuery plugin for nested modals

1. Introduction

Modally is a jQuery plugin created to handle nested modals (modals opened from another modal). The plugin is lightweight and simple to configure. If you need to you can adopt the look to your needs using custom CSS styles.

Simple jquery plugin for nested modals

2. Plugin Overview

Library	Modally
Author	Nikola Stamatovic
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version

Demo

3. How to install and use Modally jQuery plugin

Follow these steps in order to install Modally jQuery plugin.

1. Load jQuery and Modally JS files into your HTML page:

<!-- 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 including all asset files create nested modals using the following structure:

 <div id="lorem" modally-max_width="1000">
    <h1 class="modal-title serif">Hey there!</h1>
    <p>Lorem Ipsum.</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>Lorem Ipsum.</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>Lorem Ipsum.</p>

    <div class="button-wrap">
        <a href="#dolor" target="_modal:close" class="button gradient small">Close me!</a>
    </div>
</div>

3. The final step is to initialize all modals using modally library:

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

modally plugin after initialization will handle opening and closing selected modals, ensuring that only the one modal will be sharp and others will stay blurred.

4. Conclusion

In this article, we presented modally jQuery plugin that you can use if your application or website using nested modals. The plugin keeps only one modal readable others will be blurred on the background.