Pop Easy

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.

Demo Download

Pop Ups

Linking Modals

Videos

Iframes

Installation

HTML

Include Script Files

Include current version of jQuery

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

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


Place in body

<a class="modalLink" href="#">Click Me

<div class="overlay"></div>

<div class="modal">

<a href="#" class="closeBtn">Close Me</a>

<!-- content here -->

</div>

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;

}

JAVASCRIPT



$(document).ready(function(){

$('.modalLink').modal({

trigger: '.modalLink',

olay:'div.overlay',

modals:'div.modal',

animationEffect: 'slidedown',

animationSpeed: 400,

moveModalSpeed: 'slow',

background: '00c2ff',

opacity: 0.8,

openOnLoad: false,

docClose: true,

closeByEscape: true,

moveOnScroll: true,

resizeWindow: true,

video:'http://player.vimeo.com/video/9641036?color=eb5a3d',

close:'.closeBtn'

});

});

Support Pop Easy

If the ad below interest you, please click.