Stylish jQuery Modal Windows Plugin - Pop Easy

Pop Easy is a super tiny (~2kb minified) but powerful jQuery plugin for easily and quickly creating Modal Windows on your website. The idea is to apply a mask overlay on your page and open a customizable pop up modal window.

Features:

• Lightweight and easy to use
• Supports multiple modal windows
• You can put any html content in the modals, such as image, text, video, iframe,etc.
• A lot of options to customize your modal windows.
• Cross browser

Basic Usage:

1. The Html

<div class="overlay"></div>
<div id="modal1" class="modal">
<p class="closeBtn">Close</p>
<h2>Your Content Here</h2>
</div>

2. The CSS

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

.modal {
  display: none;
  background: #eee;
  padding: 0 20px 20px;
  overflow: auto;
  z-index: 1001;
  position: absolute;
  width: 500px;
  min-height: 300px;
}

3. Include jQuery library and jQuery Pop Easy on your web page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type='text/javascript' src='js/jquery.modal.js'></script> 

4. Call the plugin with options

$(document).ready(function(){

    $('.modalLink').modal({
        trigger: '.modalLink',          // id or class of link or button to trigger modal
        olay:'div.overlay',             // id or class of overlay
        modals:'div.modal',             // id or class of modal
        animationEffect: 'slideDown',   // overlay effect | slideDown or fadeIn | default=fadeIn
        animationSpeed: 400,            // speed of overlay in milliseconds | default=400
        moveModalSpeed: 'slow',         // speed of modal movement when window is resized | slow or fast | default=false
        background: 'a2d3cd',           // hexidecimal color code - DONT USE #
        opacity: 0.7,                   // opacity of modal |  0 - 1 | default = 0.8
        openOnLoad: false,              // open modal on page load | true or false | default=false
        docClose: true,                 // click document to close | true or false | default=true    
        closeByEscape: true,            // close modal by escape key | true or false | default=true
        moveOnScroll: true,             // move modal when window is scrolled | true or false | default=false
        resizeWindow: true,             // move modal when window is resized | true or false | default=false
        video: 'http://player.vimeo.com/video/2355334?color=eb5a3d',    // enter the url of the video
        videoClass:'video',             // class of video element(s)
        close:'.closeBtn'               // id or class of close button
    });
});

---

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