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

Minimal Clean Modal Window Plugin With jQuery  - simple-modal.js
File Size: 3.69 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.