Animated & Stackable Modal Plugin with jQuery and CSS3 - Stackbox

File Size: 95.3 KB
Views Total: 4630
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated & Stackable Modal Plugin with jQuery and CSS3 - Stackbox

Stackbox is a jQuery plugin for creating stackable and fully customizable modal boxes with CSS3 animations depending on animate.css.

Basic Usage:

1. Include the jQuery stackbox plugin's CSS and animate.css in the head section of the document.

<link rel="stylesheet" href="dist/jquery.stackbox.min.css">
<link rel="stylesheet" href="//">

2. Include the jQuery stackbox plugin's Javascript after jQuery library but before closing body tag.

<script src=""></script> 
<script src="dist/jquery.stackbox.min.js"></script>

3. Create a link to open a modal box and pass the options via Html5 data-OPTION attributes.

  Open Stackbox

4. Create the content for the modal box.

<div id="modal-content" class="demo">
  <div class="stackbox-header">Modal Title</div>
  <div class="stackbox-body">
    Modal Body
  <div class="stackbox-footer">
    <button class="btn btn-default" data-close-stackbox="true">Close</button>

5. Ensure that the modal box is hidden by default.

.demo { display: none; }

6. Available options with defaults, The options can be passed via data attributes or JavaScript.

content: "" // Plain html, or an #id selector for jQuery
width: "auto" // Sets the width of the entire Stackbox.
maxWidt: 9999 // Maximum width when width is in percent.
minWidth: 100 // Minimum width when width is in percent.
respectBrowserWidth: 100 // Should the stackbox respect the browser's width?
scrollSpeed: 600 // Scroll speed in milliseconds.
scrollEasing: easeOutCirc // Scroll easing.
backdrop: auto // Add a backdrop to the Stackbox?
closeOnBackdrop: true	
position: bottom	
marginX: 15 // X margin between the Stackbox and the offspring.
marginY: 5 // Y margin between the Stackbox and the offspring.
nextTo: null // Place this stackbox next to another element?
animOpen: fadeIn // animated.css animations
animClose: fadeOut // animated.css animations
mainWrapperClass: stackboxes	
noscrollClass: noscroll	
closeButtonIcon: &#x2716;	
spinnerClass: loading-spinner	
autoAdjust: true	
autoScroll: true // Scroll to stackbox when opened if outside of (or partically outside of) the window.
queryParams: null // Object to send as ajax data.
requestType: GET	
clone: false	
returnContent: true // If true, adds extracted dom content back into the dom tree when closing the stackbox.
closeButton: true	
requestFailed: "Request failed. Please try again"	
beforeOpen: function // Callback
afterOpen: function // Callback
beforeClose: function // Callback
afterClose: function // Callback
onError: function // Callback

Change logs:

v0.3.4 (2015-02-08)

  • Updated dependencies.

v0.3.2 (2015-02-07)

  • Use documentElement instead of body to detect css3 animations

v0.3.1 (2015-01-16)

  • Fixed a bug where the close animation failed, because the animation end event handlers were registered twice.

v0.3.0 (2014-11-05)

  • Follow semantic versioning.

v0.2.9 (2014-11-03)

  • If a modal's content changes, thereby affecting its width and/or height, its position is also automatically updated 

v0.2.8 (2014-10-21)

  • Body's overflow now gets reset to 'auto' when closing the last modal.

v0.2.7 (2014-10-17)

  • Fix issue where the modal's content is hidden below the browser window

v0.2.6 (2014-07-12)

  • Fixed positioning bug when using animation on open.
  • Added animation end detection support for Opera.

v0.2.5 (2014-07-03)

  • Fixed bug where modal was positioning itself above offspring element even if without checking if there actually was any room for it.

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