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.