Simple jQuery Overlay and Popup Box Plugin - overlayBox

jQuery overlayBox is a lightweight and fast jQuery plugin that makes it easier to create overlay box or popup box on your web page.

Basic Usage:

1. Include jQuery library and jQuery overlayBox plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/libs/overlayBox.js"></script>

2. Create the overlay boxes

<div id="overlay">
<div class="overlay-content">This is a content</div>
<div class="overlay-content">This is an other content</div>
</div>

3. The CSS

<style>
#overlay {
position: absolute;
top: 0;
left: 0;
background: url('../overlay-bg.png') repeat;
display: none;
}
#overlay .overlay-content {
display: none;
height: auto;
}
#overlay .loaded-content,  #overlay .error-content {
float: left;
display: none;
height: 300px;
}
#overlay #overlay-close {
position: absolute;
top: 5px;
right: 5px;
}
</style>

4. Create buttons to trigger the overlay boxes

<div id="layout"> 
<a href='#' class="button" data-overlay-btn-id='1'>Click Me</a> 
<a href='#' class="button" data-overlay-btn-id='2'>Click Me</a> 
</div>

5. The javascript

<script type="text/javascript">
$(document).ready(function() {
$('.button').on({
click : function(e) {
e.preventDefault();
e.stopPropagation();

var contentData = "<a href=# id='overlay-close'>X</a>Valami";

$('#overlay').overlayBox({
closeBtnId : '#overlay-close', // close button DOM ID
contentBlockWidth : '400', // The overlay content block of width.
zIndexValue : '10', 
onOverlayLoaded : function(el) {
console.info(el)
},
onOverlayClosed : function() {
console.info('CLOSED OVERLAY');
}
}, $(this));
}
});

});
</script>

More Example:

• Basic Example
• Default Example
• Popup box Example

---

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