Minimal Generic Modal Window Plugin With jQuery - Modal.js

A lightweight, easy-to-use jQuery modal plugin which has the ability to load and display inline or external contents in a responsive modal popup.

How to use it:

1. Load the modal's style sheet in the head section of the document.

<link rel="stylesheet" href="modal/style.css">

2. Load jQuery JavaScript library and the modal's script at the end of the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="modal/modal.js"></script>

3. Enable an anchor link to toggle a modal window that loads content from inline elements.

<a href="link?it-doesnt-matter" class="modal__open">Click Me</a>

<div class="modal">
  <div class="modal__inner">
    <button class="modal__close"></button>
    <div class="modal__content">
      <h1>Modal Header</h1>
      <p>Modal Content Here</p>
      <p>You can also close the modal window by pressing <b>Esc</b>.</p>
    </div>
  </div>
</div>

4. Enable a trigger element to toggle a modal window that loads content from an external file.

<button modal-src="external.html" 
        modal-content="#content" 
        class="modal__open">
        Click Me
</button>

---

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