Minimalist jQuery Modal Windows Plugin - Overlay

A dead simple jQuery plugin used to create a closable modal window with a fullscreen overlay and easing effects.

More examples:

• Example 1: Popups a modal window on page load.
• Example 2: Popups a modal window by clicking the trigger.

How to use it:

1. Make sure to load the jQuery Overlay plugin after jQuery javascript library.

<link href="css/overlay.css" rel="stylesheet" media="screen" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/overlay.js"></script>

2. Include the jQuery easing plugin for easing options.

<script type="text/javascript" src="js/libs/jquery.easing.1.3.js"></script>

3. Create the modal content.

<div id="overlay">
YOUR CONTENT
</div>

4. Popups a modal window with a time delay.

<script>
var o;

jQuery(document).ready(function($){
	
o = new Overlay();
	
setTimeout(function(){
o.show();
},1000);
	
});
</script>

5. Configurations.

minTop: 50,
fallbackId: 'fallback',
overlayId: 'overlay',
duration: 800,
effect: 'swing',
hasCloseBtn: true,
closeBtnClass: 'close',
closeBtnText: 'x',
hasFallbackClick: true

Change log:

2014-10-09

• Update

2014-09-12

• Update

2014-09-07

• Update

2014-03-24

• Update

---

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