Nested Modal Windows With Blurred Background - jQuery Modally

Nested Modal Windows With Blurred Background - jQuery Modally
File Size: 12.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Modally is an awesome jQuery nested modal plugin that allows your visitors to open another modal window in the current modal window.

It means that the users are able to open multiple modal windows at a time.

How to use it:

1. Load the JavaScript jquery.modally.js and Stylesheet jquery.modally.js in the HTML document.

<link rel="stylesheet" href="jquery.modally.css">
<script src="jquery.min.js"></script>
<script src="jquery.modally.js"></script>

2. Create multiple modal windows in the document. The modally-max attribute is used to specify the max width of the modal window.

<div id="modal-1" modally-max_width="1000">
  <h1 class="modal-title">Modal 1</h1>
  <p>Modal 1 Content</p>
  <div class="button-wrap">
    <a target="_modal:close" class="button">Close me!</a>
    <a href="#modal-2" target="_modal" class="button ">Open 2nd one!</a>
  </div>
</div>

<div id="modal-2">
  <h1 class="modal-title">Modal 2</h1>
  <p>Modal 2 Content</p>
  <div class="button-wrap">
    <a class="button modally-close">Close me!</a>
  </div>
</div>

3. Create a trigger link to toggle the modal 1.

<a href="#modal-1" target="_modal">Launch</a>

4. Initialize the modal windows and done.

$('#modal-1').modally();
$('#modal-2').modally();

5. You're also allowed to specify the max width in the JavaScript during init.

$('#modal-2').modally('modal-2',{
  max_width: 800
});

6. Decide whether to close the parent modal when a new modal is activated. Default: false.

$('#modal-2').modally('modal-2',{
  'close_parent': true
});

7. Decide whether to close all other modal windows when a new modal is activated. Default: false.

$('#modal-2').modally('modal-2',{
  'close_other': true
});

8. Set the vertical alignment of the modal window. Default: 'middle'.

$('#modal-2').modally('modal-2',{
  'vertical_align': 'top'
});

9. Apply a blur effect to the main content when the modal window is activated.

.modally-wrap.open:not(.last) {
  filter: blur(5px);
}

10. Config the animation.

$('#modal-2').modally('modal-2',{
  'in_duration': 'normal',
  'in_easing': 'swing',
  'out_duration': 'normal',
  'out_easing': 'swing'
});

Changelog:

v1.0.4 (2019-09-14)

  • fixed the bug with scrolllock code

2019-08-21

  • added duration
  • added easing
  • allows you to close the modal by pressing the ESC key

2019-08-20

  • Fixed page scroll issue

This awesome jQuery plugin is developed by stamat. For more Advanced Usages, please check the demo page or visit the official website.