Super Lightweight jQuery Modal Popup Plugin - Overlay

A really simple and lightweight jQuery plugin which allows you to display any Html content in a modal style lightbox with a fullscreen overlay.

How to use it:

1. Load the latest version of jQuery JavaScript framework and the jQuery overlay in the html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="overlay.js"></script>

2. Create a link to trigger a modal popup.

<a href="#" id="click-me">Click Me</a>

3. Embed Html content into the modal popup using JS data object. 

var data = "Content goes here";

4. Override the default config options.

var config = {

// animation duration
duration: 100, 

// CSS selector for modal's background
bgClass: 'bg',

// Background color of your modal
bgColor: 'rgba(0,0,0,.45)',

// CSS selector for modal's overlay
boxClass: 'overlay-box',

// CSS selector for the close button
closeBtnClass: 'overlay-closeBtn',

// close button's text or img
closeBtnText: 'x' 

};

5. Initialize the modal plugin.

$('#click-me').overlay(data, config, function(){

  // trigger on create

  },function(){

    // trigger on close

});

6. Style the modal popup whatever you like.

.overlay-box {
  position: relative;
  width: 400px;
  background: #34A65F;
  color: #fff;
  margin: auto;
  padding: 20px;
  box-shadow: 0 0 10 #333;
}

/*close button*/
.overlay-closeBtn {
  font-family: sans-serif;
  padding: 3px 8px;
  background: #F5624D;
  color: #fff;
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 0;
}

---

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