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>

.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;
}

$(document).ready(function(){
    $('.popeasy').popeasy({
    trigger: '.popeasy',
    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'
    });
});

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.

HOW TO LOAD EXTERNAL FILES INTO MODAL

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