How to make use of it:

1. To get began, simply place the jquery.modal.js script after the jQuery library and we’re able to go.

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

2. Create a picture lightbox.

<a href="1.jpg" 
  class="chaos-modal-link" 
  title="image title" 
  data-chaos-modal-caption="image caption">
  // Add Image Here
</a>

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

3. Load modal content from inline HTML components 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 customers can navigate between a number of 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">
       // Add Image Here
     </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">
       // Add Image Here
     </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">
       // Add Image Here
     </a>
  </div>
</div>

6. The event handler will be useful 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();
});

Simple Performant Modal Box Plugin, jQuery Chaos Modal Plugin/Github

See Demo And Download