Overlay js - Lightweight jquery plugin (1.75kb minified)

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,
	url: '',
	showAfter: 0,
	hideAfter: 0,
	close: true,
	escClose: true,
	remove: false
});
Try me

Basic usage

$("#overlay-content").overlay(); 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

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.