This time I will share jQuery Plugin and tutorial about Nested Modal Windows With Blurred Background – jQuery Modally, hope it will help you in programming stack.
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 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.
1 |
<link rel="stylesheet" href="jquery.modally.css"> |
2 |
<script src="jquery.min.js"></script> |
3 |
<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.
01 |
<div id="lorem" style="display:none" class="modally-init" modally-max-width="1000"> |
02 |
<h1 class="modal-title">Hey there!</h1> |
03 |
<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> |
04 |
<div class="button-wrap"> |
05 |
<a target="_modal:close" class="button small">Close me!</a> |
06 |
<a href="#ipsum" target="_modal" class="button gradient small">Open 2nd one!</a> |
09 |
<div id="ipsum" style="display:none"> |
10 |
<h1 class="modal-title">You still here?!</h1> |
11 |
<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> |
12 |
<div class="button-wrap"> |
13 |
<a class="button small modally-close">Close me!</a> |
3. Create a trigger link to toggle the modal 1.
1 |
<a href="#lorem" target="_modal">Launch</a> |
4. Initialize the modal windows and done.
1 |
$('#ipsum').modally('ipsum', { |
5. You’re also allowed to specify the max width in the JavaScript during init.
1 |
$('#ipsum').modally('ipsum',{ |
6. Decide whether to close the parent modal when a new modal is activated. Default: false.
1 |
$('#ipsum').modally('ipsum',{ |
7. Decide whether to close all other modal windows when a new modal is activated. Default: false.
1 |
$('#ipsum').modally('ipsum',{ |
8. Set the vertical alignment of the modal window. Default: ‘middle’.
1 |
$('#ipsum').modally('ipsum',{ |
2 |
'vertical_align': 'top' |
9. Embed a Youtube or Vimeo video into the modal.
1 |
modally('video-modal', { |
10. Config the animation.
1 |
$('#ipsum').modally('ipsum',{ |
2 |
'in_duration': 'normal', |
4 |
'out_duration': 'normal', |
Changelog:
2020-02-07
2020-02-04
2019-11-24
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
This awesome jQuery plugin is developed by stamat. For more Advanced Usages, please check the demo page or visit the official website.
