Simple Performant Modal Box Plugin - jQuery Chaos Modal

Chaos Modal is a flexible, fast, customizable, high-performance jQuery Modal Window plugin for any inline content.

More Features:

• Easy to use without any JS call.
• Delays the loading of images, videos, and iframes.
• Auto adds loading="lazy" attribute to images.
• Gallery Lightbox Mode is supported as well.

See Also:

• 10 Best Modal Components In JavaScript & Pure CSS

How to use it:

1. To get started, just place the jquery.modal.js script after jQuery library and we're ready to go.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.modal.js"></script>

2. Create an image lightbox.

<a href="1.jpg" 
  class="chaos-modal-link" 
  title="image title" 
  data-chaos-modal-caption="image caption">
  <img src="1.jpg" />
</a>

<!-- OR -->
<div class="chaos-modal-link">
  <a href="2.jpg" 
     title="image title"
     data-chaos-modal-caption="image caption">
     <img src="2.jpg" />
   </a>
</div>

3. Load modal content from inline HTML elements as follows:

<div class="content-wrap">
  <a href="#" class="chaos-modal-link">Trigger Element</a>
  <div class="chaos-modal-box">
    Modal Content Here
  </div>
</div>

<!-- OR -->
<div class="content-wrap">
  <a href="#" class="chaos-modal-link" data-chaos-modal-box-id="modal-content-id">Trigger Element</a>
</div>
<div id="modal-content-id">
  Modal Content Here
</div>

4. Embed a Youtube video into the modal window:

<div class="content-wrap">
  <a href="#" class="chaos-modal-link" data-chaos-modal-iframe-add-autoplay="true">Youtube Video</a>
  <div class="chaos-modal-box" style="display:none">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/6zzeSJxJS4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

5. Create a gallery lightbox that users can navigate between multiple modal content with arrow keys:

<div data-chaos-modal-gallery="gallery1">
  <div class="chaos-modal-link">
    <a href="1.jpg" 
       title="image title"
       data-chaos-modal-caption="image caption">
       <img src="1.jpg" />
     </a>
  </div>
</div>
<div data-chaos-modal-gallery="gallery1">
  <div class="chaos-modal-link">
    <a href="2.jpg" 
       title="image title"
       data-chaos-modal-caption="image caption">
       <img src="2.jpg" />
     </a>
  </div>
</div>
<div data-chaos-modal-gallery="gallery1">
  <div class="chaos-modal-link">
    <a href="3.jpg" 
       title="image title"
       data-chaos-modal-caption="image caption">
       <img src="3.jpg" />
     </a>
  </div>
</div>

6. Config the modal window with the following data attributes:

• data-chaos-modal-max-width: Max width of the modal. Default 960.
• data-chaos-modal-css-class: Append addition CSS classes to the modal. Default false.
• data-chaos-modal-close-link: Decide whether to show the close button. Default true.
• data-chaos-modal-print-link: Decide whether to show the print button. Default false.
• data-chaos-modal-click-passthrough: Decide whether to allow the user to click through the modal to underlying elements. Default false.
• data-chaos-modal-iframe-add-autoplay: Decide whether to auto-play videos in the iframe. Default true.
• data-chaos-modal-caption: Add custom caption to the bottom of the modal.

7. The event handler can be helpful in preprocessing modal content.

<div class="chaos-modal-link" data-preprocess="true">Link</div>

var modal_links = $('.chaos-modal-link');

modal_links.on('chaos-modal-preprocess', function( event, modal){
  $(window).on('chaos-modal-preprocess-interrupt', function( event ){
    // Fired when the modal/loading screen is closed.
  });
  // If you do not want to pre-process the modal every time, set data-preprocess to false
  $(this).attr('data-preprocess','false');
  // Preprocessing function MUST call openModal when preprocessing complete
  modal.openModal();
});

Changelog:

2023-09-07

• JS Update

---

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