Pop Easy V2

A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.

Only 2KB & Compatible back to IE7

Single Modal

Linking Modals




Include Script Files

<script type='text/javascript' src='jquery.popeasy.js'></script> <script type='text/javascript' src='site.js'></script>

Place in body

<a class="popeasy" href="#">Click Me <div class="overlay"></div> <div class="modal"> <a href="#" class="closeBtn">Close Me</a> <!-- content here --> </div>


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

    display: none;
    padding:0 20px 20px;
    width: 500px;
    min-height: 300px;


    trigger: '.popeasy',
    animationEffect: 'slidedown',
    animationSpeed: 400,
    moveModalSpeed: 'slow',
    background: '00c2ff',
    opacity: 0.8,
    openOnLoad: false,
    docClose: true,
    closeByEscape: true,
    moveOnScroll: true,
    resizeWindow: true,

Option Default Description
trigger .popeasy 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
clicktoInit false load external content
animationEffect slidedown overlay effect | slideDown or fadeIn
animationSpeed 400 speed of overlay in milliseconds
moveModalSpeed slow speed of modal when window is resized
background 000000 hexidecimal color code - DONT USE #
maskOpacity 0.8 opacity of mask
modalOpacity 0.8 opacity of modal
openOnLoad false open modal on page load boolean
docClose true click document to close boolean
closeByEscape true close modal by escape key boolean
moveOnScroll true recenter modal when window is scolled boolean
resizeWindow true recenter modal when window is resized boolean
videoClass video required: class of the video element(s)
close .closeBtn id or class of close button

How to use with multiple modals

To use multiple modals on one page, you must sync the href attribute of the element that triggered the event to the id of the div you wish to open. This works the same with transitioning from one open modal to another. Just place a link in the modal you wish to leave with an href attribute matching the id of the next modal.

<a class="popeasy" href="#modal1">Click To Open Modal</a> <div id="modal1" class="modal"></div>

How to use with video

To use a hosted video from Vimeo, YouTube, etc. embed the iframe in the modal. Then set a class. The class name is a required element and must be passed to the plugin. When a iframe is embedded, it is best to set moveOnScroll to false.


Use the HTML5 data-path attribute to call external files. Place the data-path attribute into the same element that has the modal class.

Report a Bug or Request a Feature