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="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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.

<a 
  data-stackbox="true"
  data-stackbox-width="400"
  href="#modal-content">
  Open Stackbox
</a>

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>
  <div class="stackbox-footer">
    <button class="btn btn-default" data-close-stackbox="true">Close</button>
  </div>
</div>

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: ✖	
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.