Super Tiny Modal Dialog Plugin - jQuery isystkOverlay

File Size: 37 KB
Views Total: 701
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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>
  <div class="wrap">
    <h2 class="entry-title">Modal Title</h2>
    ... More Modal Content Here ...

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

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. {
  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 {

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

  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.