Simple jQuery Overlay and Popup Box Plugin - overlayBox

File Size: 94 KB
Views Total: 9498
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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>

3. The CSS

#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;

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> 

5. The javascript

<script type="text/javascript">
$(document).ready(function() {
click : function(e) {

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

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


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.