Simple jQuery Overlay and Popup Box Plugin - overlayBox
File Size: | 94 KB |
---|---|
Views Total: | 9483 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.