Stackbox is a jQuery plugin for creating stackable modal boxes. It's easy to customize using CSS / LESS.
What browsers are supported?
(ish)
Stackbox is a jQuery plugin for creating stackable modal boxes. It's easy to customize using CSS / LESS.
<div id="some-element" style="display: none;">
<div class="stackbox-body">Stackbox example with options</div>
</div>
<a href="#some-element"
data-stackbox="true"
data-stackbox-close-button="true"
data-stackbox-position="bottom"
data-stackbox-anim-open="tada slow">Open Stackbox</a>
$('#some-element').stackbox({
closeButton: true,
position: 'bottom',
animOpen: 'tada slow'
});
(ish)| Name | Values | Default value | Description | Examples |
|---|---|---|---|---|
| content | html | #id string | The content can be provided either by using plain html, or by using a DOM #id selector string. | ||
Example using html string:See the Pen Stackbox html content example by Stefan Bruvik (@stebru) on CodePen. Example using DOM #id selector:See the Pen Stackbox DOM #id content example by Stefan Bruvik (@stebru) on CodePen. | ||||
| width | number (200) | number + unit ('300px', '300%' etc.) | 'auto' | auto | Sets the width of the entire Stackbox. | |
| maxWidth | See width | false | Maximum width when width is in percent. | |
| minWidth | See width | false | 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 | ||