Minimal Clean Modal Window Plugin With jQuery - simple-modal.js

A really small jQuery inline modal plugin which can be used for display any html content embedded in your html page.

How to use it:

1. Download the 'jquery.simple-modal.js' script and reference it in your HTML file.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.simple-modal.js"></script>

2. Add your html content into an DIV container with an unique modal ID specified in the data-modal-id attribute:

<div data-modal-id="modal" class="modal-container">

  <div class="modal-bg"></div>
  
  <div class="modal-inner">
    Modal Content Here
  </div>
  
</div>

3. Create a toggle link and specify the modal ID using the data-target-modal-id attribute.

<a href="" data-target-modal-id="modal">show modal</a>

4. The JavaScript to active the plugin.

$("a[data-target-modal-id]").simpleModal();

5. Apply your custom CSS styles to the modal.

.modal-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  opacity: 0;
}

.modal-container.open { display: block; }

.modal-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
}

.modal-bg {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.7;
  width: 100%;
  height: 100%;
}

6. That's it. You can close the modal by clicking anywhere on the background overlay.

---

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