Overlay js - Lightweight jquery plugin (2kb minified)

Demo Version: 2.0

Project url: http://dev.codinglog.com/jquery/overlay-js/

bitbucket repo: https://bitbucket.org/mtsandeep/overlay/

Default options for the overlay js

$("#overlay-content").overlay({
		position: 'fixed',
		background: '#000',
		opacity:0.5,
		zIndex:99,
		url: '',
		showAfter: 0,
		hideAfter: 0,
		close: true,
		escClose: true,
		remove: false,
		replaceWith: '',
		onTrigger : function(){},
		onLoad : function(){},
		onClose : function(){}
});
Try me

Basic usage

$("#overlay-content").overlay(); Try me

Basic usage with all callback functions

	$("#overlay-content").overlay({
		onTrigger: function(){
			alert('overlay activated');
		},
		onLoad: function(){
			alert('overlay load complete');
		},
		onClose: function(){
			alert('overlay Closed');
		}
	});
Try me

Removing an overlay

$("#overlay-content").overlay(remove:true);

OR

A click on an element with class "overlay-close" inside the overlay will close the overlay.
For eg: <a class="overlay-close" href="#close">Close this</a>
Try me

Overlay without a close link

$("#overlay-content").overlay({close:false}); Try me

Overlay autoloading after specified time(for eg: 2 seconds)

$("#overlay-content").overlay({showAfter:2000}); Try me

Overlay closing after specified time(for eg: 5 seconds)

$("#overlay-content").overlay({hideAfter:5000}); Try me

Overlay with ajax content

$("#overlay-content").overlay({url:'ajax_content.html'}); Try me

Overlay with a different background color(Default is #000)

$("#overlay-content").overlay({background:'#ccc'}); Try me

Overlay with a different background color(Default is 0.5)

$("#overlay-content").overlay({opacity:0.8}); Try me

Controlling the position of overlay content(Default is position:fixed)

$("#overlay-content").overlay({position:'absolute'}); Try me

Overlay which cannot be closed by esc key.

$("#overlay-content").overlay({escClose:false}); Try me

Overlay loaded into an existing overlay (calling another content into an overlay).

$("#overlay-content").overlay();
$("#overlay-content").overlay({replaceWith:'#overlay-content2'});
Try me

Custom styling for the overlay(with css)

<style>
#overlay-custom .overlay-close {
	display: inline;
	float: right;
	margin-right: -17px;
	margin-top: -17px;
	background:url(close.png) no-repeat;
	text-indent:-999em;
	width:16px;
	height:16px;
}
#overlay-custom{
	background: #FFF;
	border: 1px solid #AAA;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 5px 15px #BBB;
	-moz-box-shadow: 0 5px 15px #BBB;
	box-shadow: 0 5px 15px #BBB;
	padding: 10px;
	width: 500px;
	display:none;
}
</style>
<script> $("#overlay-custom").overlay({opacity:0.9,background:'#fff'}); </script>
Try me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum ullamcorper nunc. Maecenas nec lacus nunc, nec ullamcorper arcu. Integer adipiscing tempus venenatis. Cras sollicitudin, mauris eu aliquam dictum, neque mauris venenatis metus, vel congue massa nisl a urna. Vestibulum tempor ultrices leo, eu blandit mauris rutrum sed. Mauris eleifend luctus malesuada. Etiam dignissim, nibh non pharetra ullamcorper, nulla magna suscipit erat, vitae facilisis lectus magna non augue. Donec quis ipsum vel sem iaculis pellentesque at quis odio. Pellentesque congue, urna id malesuada fermentum, nisi nunc tempus metus, vel tempus nibh sem malesuada sapien. Cras id risus metus.

<script type="text/javascript">
$(function() {
  $('#close').click(function(e){
	e.preventDefault();
	$("#overlay-content1").overlay({remove:true});
  });
});
</script>
	

you can close me by clicking this link binded to the function above -> click me

You can close me by clicking link with class "overlay-close" -> Close this

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum ullamcorper nunc. Maecenas nec lacus nunc, nec ullamcorper arcu. Integer adipiscing tempus venenatis. Cras sollicitudin, mauris eu aliquam dictum, neque mauris venenatis metus, vel congue massa nisl a urna. Vestibulum tempor ultrices leo, eu blandit mauris rutrum sed. Mauris eleifend luctus malesuada. Etiam dignissim, nibh non pharetra ullamcorper, nulla magna suscipit erat, vitae facilisis lectus magna non augue. Donec quis ipsum vel sem iaculis pellentesque at quis odio. Pellentesque congue, urna id malesuada fermentum, nisi nunc tempus metus, vel tempus nibh sem malesuada sapien. Cras id risus metus.

<script type="text/javascript">
$(function() {
  $('#load-content').click(function(e){
	e.preventDefault();
	$("#overlay-content").overlay({replaceWith:'#overlay-content2'});
  });
});
</script>
	

you can load another div -> Load another content

new content loaded into the overlay.