jQuery jOverlay

Required

• jQuery (1.3.x or higher)
• jquery.joverlay.js (7.2kb, Source Code)
• jquery.joverlay.min.js (5.0kb, Minified for production)
• jquery.joverlay.pack.js (3.6kb, Pack for production)

Current Release: v.0.8

Browser Compatibility

jOverlay has been tested successfully in the following browsers with Javascript enabled:

• Firefox 3+
• Internet Explorer 6+
• Safari 2+
• Opera 9+
• Chrome 1+

Examples

Includes

NO CSS!

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

<script type="text/javascript" src="jquery.joverlay.min.js"></script>

Default options

$.fn.jOverlay.options = {
	method : 'GET',
	data : '',
	url : '',
	color : '#000',
	opacity : '0.6',
	zIndex : 9999,
	center : true,
	imgLoading : '',
	bgClickToClose : true,
	success : null, // Deprecated !!! Use onSuccess
	onSuccess : null,
	timeout : 0,
	autoHide : true,
	css : {},
	html : '',
	closeOnEsc : true
};

// Set default options (GLOBAL)
// Overiding the default values.
$.fn.jOverlay.setDefaults(options);
$().jOverlay.setDefaults(options);
Ex.: $().jOverlay.setDefaults({opacity:0.9});

Usage

BOX 1

$('#box1').jOverlay();

$('#box1').jOverlay({color:'green', opacity : 0.9});

Box 1

Box 1 + options

BOX 2 + AJAX + NO BG CLICK TO CLOSE + NO AUTOHIDE

$('#box2').jOverlay({url:'teste.html', bgClickToClose : false, autoHide : false});

Box 2 + AJAX

AJAX + LOADING

$().jOverlay({url:'teste2.html', imgLoading : 'ajax-loader.gif'});

AJAX + loading

BOX1 + onSuccess + HTML

$('#box1').jOverlay({success:function(element){ alert(element.html());}});

BOX1 + RESPONSETEXT

AJAX + onSuccess + RESPONSETEXT

$().jOverlay({
	url:'teste2.html'
	,imgLoading : 'ajax-loader.gif'
	,onSuccess:function(resp){
		alert(resp);
	}
});

AJAX + RESPONSETEXT

BOX 1 + Timeout (auto-close)

Time in millis to wait before auto-close.

Set to 0 to disable.

$('#box1').jOverlay({timeout:2000});

BOX 1 + Timeout (auto-close)

LOAD IMAGES! (png, gif, jpeg, jpg, bmp)

(AUTO) Resizing large images

Load Image

lucas.jpeg width = 1200 pixels and height = 1600 pixels (471,2 KB)

$().jOverlay({url:'lucas.jpeg', imgLoading : 'ajax-loader.gif'});

Load Image

BOX IMG + Load Image

lucas.jpg width = 640 pixels and height = 480 pixels (70,7 KB)

$('#boxImg').jOverlay({url:'lucas.jpg', imgLoading : 'ajax-loader.gif'});

Load Image

BOX 1 + CHANGE CSS

$('#box1').jOverlay({center:false,css:{right:0,border:'10px solid red'}});

Box 1 + CHANGE CSS

Bug Fix: jOverlay + callback=jOverlay (more calls)

$('#box1').jOverlay({onSuccess:function(){ $('#box2').jOverlay({url:'teste.html'});}});

jOverlay + callback=jOverlay

BOX IMG + INNER HTML

$('#boxImg').jOverlay({html:'Hello?!'});

BOX IMG + INNER HTML

BOX IMG + INNER HTML + CHANGE CSS

$('#boxImg').jOverlay({html:'Thank you for downloading jOverlay.',center:false,css:{right:0}});

BOX IMG + INNER HTML + CHANGE CSS

BOX IMG + Load Image + slideDown

$('#boxImg').jOverlay({url:'lucas.jpg', imgLoading : 'ajax-loader.gif',
onSuccess:function(el){el.hide().slideDown('slow')}});

Load Image + slideDown

CLOSE (FUNCTION)

$.closeOverlay();

BOX 2 + Suppresses ESC CLOSE

By default, overlays are closed when the ESC keyboard key is pressed. Setting this property to false suppresses this behaviour.

$('#box2').jOverlay({closeOnEsc:false});

BOX 2 + Suppresses ESC CLOSE

Support

Support is available through the email : alvarolimajr [at] gmail [dot] com

Credits

Written by Alvaro Junior