JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
Stackbox is a jQuery plugin for creating stackable modal boxes.
Source: stefan.codes
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="../plugin/dist/jquery.stackbox.min.css"> <script src="../bower_components/jquery/dist/jquery.min.js"></script> <script src="../plugin/dist/jquery.stackbox.min.js"></script>
2. HTML
<div id="basic" style="display: none;"> <div class="stackbox-body">This is a basic Stackbox example</div> </div> <a href="#basic" data-stackbox="true">Open Stackbox</a>
3. JAVASCRIPT
$('#basic').stackbox({
backdrop: true,
animOpen: 'tada slow'
});
4. OPTIONS
| Name | Value | Default | Description |
|---|---|---|---|
| content | html|#id string | Plain html, or an #id selector for jQuery | |
| width | number (200) | number + unit ('300px', '300%' etc.) | 'auto' | auto | Sets the width of the entire Stackbox. |
| maxWidth | See width | 9999 | Maximum width when width is in percent. |
| minWidth | See width | 100 | Minimum width when width is in percent. |
| respectBrowserWidth | true|false | 100 | Should the stackbox respect the browser's width? |
| scrollSpeed | number | 600 | Scroll speed in milliseconds. |
| scrollEasing | easeOutBack|scrollSpeed | easeOutCirc | Scroll easing. |
| backdrop | true|false|auto | auto | Add a backdrop to the Stackbox? |
| closeOnBackdrop | true|false | true | |
| position | top|bottom|left|right|absolute | bottom | |
| marginX | number | 15 | X margin between the Stackbox and the offspring. |
| marginY | number | 5 | Y margin between the Stackbox and the offspring. |
| nextTo | #id string | null | Place this stackbox next to another element? |
| animOpen | Name of keyframe animation | fadeIn | |
| animClose | Name of keyframe animation | fadeOut | |
| mainWrapperClass | string | stackboxes | |
| noscrollClass | string | noscroll | |
| closeButtonIcon | html | ✖ ✖ | |
| spinnerClass | string | loading-spinner | |
| autoAdjust | true|false | true | |
| autoScroll | true|false | true | Scroll to stackbox when opened if outside of (or partically outside of) the window. |
| queryParams | Object literal {...} | null | Object to send as ajax data. |
| requestType | POST|GET | GET | |
| clone | true|false | false | |
| returnContent | true|false | true | If true, adds extracted dom content back into the dom tree when closing the stackbox. |
| closeButton | true|false | true | |
| requestFailed | html | Request failed. Please try again. | |
| beforeOpen | function | Callback | |
| afterOpen | function | Callback | |
| beforeClose | function | Callback | |
| afterClose | function | Callback | |
| onError | function | Callback |
