Nested Modal Home windows With Blurred Background – jQuery Modally

Modally is an superior jQuery nested modal plugin that enables your guests to open one other modal window within the present modal window.

Options:

• Open a number of modal home windows at a time.
• Stop physique scroll when the modal window is activated.
• Helps Youtube & Vimeo & HTML5 videos.
• Customized vertical orientation.
• Customized in/out easings.

Methods to use it:

1. Load the JavaScript jquery.modally.js and Stylesheet jquery.modally.js within the HTML doc.

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

2. Create a number of modal home windows within the doc. The modally-max-width attribute is used to specify the max width of the modal window.

<div id="lorem" fashion="show:none" class="modally-init" modally-max-width="1000">
  <h1 class="modal-title">Hey there!</h1>
  <p>Lorem Ipsum is just dummy textual content of the printing and typesetting trade. Lorem Ipsum has been the trade's customary dummy textual content ever because the 1500s, when an unknown printer took a galley of sort and scrambled it to make a sort specimen guide. It has survived not solely 5 centuries, but in addition the leap into digital typesetting, remaining basically unchanged. It was popularised within the Nineteen Sixties with the discharge of Letraset sheets containing Lorem Ipsum passages, and extra not too long ago with desktop publishing software program like Aldus PageMaker together with variations of Lorem Ipsum. Sure I'm this lazy.</p>
  <div class="button-wrap">
    <a goal="_modal:shut" class="button small">Shut me!</a>
    <a href="#ipsum" goal="_modal" class="button gradient small">Open 2nd one!</a>
  </div>
</div>
<div id="ipsum" fashion="show:none">
  <h1 class="modal-title">You continue to right here?!</h1>
  <p>Lorem Ipsum is just dummy textual content of the printing and typesetting trade. Lorem Ipsum has been the trade's customary dummy textual content ever because the 1500s, when an unknown printer took a galley of sort and scrambled it to make a sort specimen guide. It has survived not solely 5 centuries, but in addition the leap into digital typesetting, remaining basically unchanged. It was popularised within the Nineteen Sixties with the discharge of Letraset sheets containing Lorem Ipsum passages, and extra not too long ago with desktop publishing software program like Aldus PageMaker together with variations of Lorem Ipsum. Sure I'm this lazy.</p>
  <div class="button-wrap">
    <a category="button small modally-close">Shut me!</a>
  </div>
</div>

3. Create a set off hyperlink to toggle the modal 1.

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

4. Initialize the modal home windows and achieved.

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

5. You are additionally allowed to specify the max width within the JavaScript throughout init.

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

6. Resolve whether or not to shut the guardian modal when a brand new modal is activated. Default: false.

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

7. Resolve whether or not to shut all different modal home windows when a brand new modal is activated. Default: false.

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

8. Set the vertical alignment of the modal window. Default: ‘center’.

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

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

<a href="#video-modal" 
   goal="_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': 'regular',
  'in_easing': 'swing',
  'out_duration': 'regular',
  'out_easing': 'swing'
});

Changelog:

2022-09-16

• help for video factor

2020-02-07

2020-02-04

2019-11-24

v1.0.4 (2019-09-14)

• mounted the bug with scrolllock code

2019-08-21

• added period
• added easing
• permits you to shut the modal by urgent the ESC key

2019-08-20

This superior jQuery plugin is developed by stamat. For extra Superior Usages, please test the demo web page or go to the official web site.