Nested Modal Windows With Blurred Background - jQuery Modally

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

Features:

• Open multiple modal windows at a time.
• Prevent body scroll when the modal window is activated.
• Supports Youtube & Vimeo & HTML5 videos.
• Custom vertical orientation.
• Custom in/out easings.

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-width attribute is used to specify the max width of the modal window.

<div id="lorem" style="display:none" class="modally-init" modally-max-width="1000">
  <h1 class="modal-title">Hey there!</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Yes I am this lazy.</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" style="display:none">
  <h1 class="modal-title">You still here?!</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Yes I am this lazy.</p>
  <div class="button-wrap">
    <a class="button small modally-close">Close me!</a>
  </div>
</div>

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

<a href="#lorem" target="_modal">Launch</a>

4. Initialize the modal windows and done.

$('#ipsum').modally('ipsum', {
  // options here
});

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

$('#ipsum').modally('ipsum',{
  max_width: 800
});

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

$('#ipsum').modally('ipsum',{
  'close_parent': true
});

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

$('#ipsum').modally('ipsum',{
  'close_other': true
});

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

$('#ipsum').modally('ipsum',{
  'vertical_align': 'top'
});

9. Embed a Youtube, Vimeo, or HTML5 video into the modal.

<a href="#video-modal" 
   target="_modal" 
   data-video="https://www.youtube.com/watch?v=u9QJo5fBADE"
   >Video Modal
</a>

modally('video-modal', {
  video: true, 
  autoplay: true
});

10. Config the animation.

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

Changelog:

2023-08-07

• v1.1.0

2022-12-14

• Update jquery.modally.js

2022-09-19

• v1.0.5

2022-09-16

• support for video element

2020-02-07

• fixed for Vimeo video

2020-02-04

• bugfixes

2019-11-24

• bugfixes

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.