Super Tiny Modal Dialog Plugin - jQuery isystkOverlay

isystkOverlay is a super tiny (3kb) and simple to use jQuery modal & dialog plugin that is easily styled and animated with your own CSS.

How to use it:

1. Insert the main JavaScript jquery-isystkOverlay.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/jquery-isystkOverlay.js"></script>

2. Initialize the plugin and we're ready to go.

$(function(){
  $('.js-overlay').isystkOverlay();
});

3. Insert your content into a modal container with the CSS class of 'isystk-overlay' and a unique ID you specify.

<div id="myModal" class="isystk-overlay">
  <a href="#" class="js-close">
    <span class="close">
      <img src="dist/images/close.png" width="30px"/></span>
  </a>
  <div class="wrap">
    <h2 class="entry-title">Modal Title</h2>
    ... More Modal Content Here ...
  </div>
</div>

4. Create a trigger element and define the anchor link pointing to your modal container in the data-panel attribute.

<a href="#" class="js-overlay" data-panel="#myModal" >
  Launch The Modal Dialog
</a>

5. Apply your own CSS styles to the modal dialog.

.isystk-overlay {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  max-width: 1200px;
  z-index: 1100;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: .1s linear;
}

.isystk-overlay .wrap {
  background-color: #fff;
  padding: 10px;
}

.isystk-overlay .title{
  margin-bottom: 5px;
  padding: 5px;
  border-bottom: solid 1px #ccc;
  font-size: 20px;
}

.isystk-overlay td {
  padding: 10px;
}

.isystk-overlay .close {
  position: absolute;
  right: 0;
  margin: 5px;
  zoom: 100%;
  color: #333;
}

6. Apply a CSS animation to the modal dialog when opening.

.isystk-overlay.open {
  opacity: 1;
  visibility: visible;
  animation: open-animation .5s ease 0s 1 forwards;
}

@keyframes open-animation {
  0% {
    transform: scaleY(.1) scaleX(.1);
  }
  50% {
    transform: scaleY(1) scaleX(.1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}

7. Customize the styles of the background overlay when the modal dialog is opened.

#overlay-background {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#0e0e0e;
  opacity:0.5;
  z-index:1000
}

8. Do something when the modal dialog is opened & closed using the following callback functions.

$('.js-overlay').isystkOverlay({
  closeCallback: null,
  openCallback: null
});

---

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