Modern Multifunctional Modal Window Plugin - jQuery umodal

umodal is a lightweight, flexible, responsive, pretty clean jQuery modal window plugin for html contents, images, ajax contents and more.

How to use it:

1. To get started, include jQuery library and the umodal plugin's files on the html page.

<link rel="stylesheet" href="umodal/umodal.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="umodal/umodal.js"></script>

2. Enable a regular anchor link to toggle a modal window that loads static html content within the document as these:

<a href="link-does-not-matter" 
   class="umodal__open" 
   umodal-id="umodal-1">
   Launch
</a>

<div umodal-id="umodal-1" class="umodal">
  <div class="umodal__inner">
    <button class="umodal__close" title="Close [Esc]"></button>
    <div class="umodal__content">
      <h2>Modal Header</h2>
      <p class="description">Modal Content</p>
    </div>
  </div>
</div>

<link rel="stylesheet" href="umodal/umodal.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="umodal/umodal.js"></script>

3. Enable a regular anchor link to toggle an image lightbox with a loading indicator.

<a href="1.jpeg" 
   class="umodal__open">
   Image Lightbox
</a>

4. Enable a regular anchor link to toggle a dynamic modal window that loads an exteral page via AJAX.

<a href="" 
   class="umodal__open" 
   umodal-src="ajax.html">
   AJAX Modal
</a>

5. You can also load a specific part of the external page into the modal window.

<a href="" 
   class="umodal__open" 
   umodal-src="ajax.html"
   umodal-content=".content">
   AJAX Modal
</a>

Changelog:

2018-09-09

• refactor

2018-05-16

• fix for append modal

2018-05-09

• Update

2018-05-06

• safari scroll fix

2018-02-22

• JS & CSS updated

---

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