Minimalist Content Modal Plugin For jQuery - Modalon

Modalon is an ultra-light jQuery plugin used to show a responsive modal window for presenting any html content on your webpage. Click on the 'Close' button or click outside to close the modal.

How to use it:

1. Put the modalon.css in the head section of your webpage.

<link rel="stylesheet" href="modalon.css">

2. Put the modalon.css at the bottom of the webpage. Note that you first need to include jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="modalon.js"></script>

3. Insert your content into the modal.

<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h4>Modal Example</h4>
    </div>
    <div class="modal-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <button class="modal-close">Close</button>
    </div>
  </div>
</div>

4. Create an element to toggle the modal.

<button class="modal-open">AbraKadabra</button>

Change log:

2016-04-12

• Update modalon.css

---

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