Just stack it

Use a StackBox to stack your data to the next level, literally. With StackBox you can create unlimted overlayers with additional information, galleries, and more!

Stackbox

Unlimited overlayers with Stackbox

Looking for the perfect solution for overlays, modals, lightboxes, dialogs, floating windows, or pop-ups? Look no further. Stackbox makes creating overlays effortless and versatile.

With Stackbox, you can include anything in your overlay: pages, forms, text, iframes, you name it. And the best part? You can create unlimited layers. That’s right. Open overlays within overlays without limitations.

Stackbox gives you complete freedom with no restrictions, empowering you to build dynamic and layered user experiences like never before.

Basic examples

Basic examples without any additional Javascript other than the Stackbox plugin itself.

Content / info
Video
Form
Carousel

Attributes

The attributes you can set in your HTML tag

Attribute	Description	Values
data-method	The display methods described above	notification, dialog, iframe
data-title	The title displayed above the container	Default wrapped in `<h2>` but can contain HTML
data-width	The width of the content container	Width in `%`,`vw`,`px`
data-content	The content you want to display	HTML or the URL in case of iframe

Stackbox examples

A couple of examples using the default Stackbox functionalities

Manual examples

For more control, animations, custom callbacks, etc. you can manually trigger your Stackbox using JQuery.

  <br> $('#RazorboxTrigger').Razorbox({ <br> sTitle: '', <br> sContent: sURL, // Just HTML, a inline element (#ElementID) or a full or local URL (depending on the method) <br> sMethod: 'ajax', // Supports default (notification), dialog, inline, iframe, ajax <br> sTarget: '', <br> sWidth: '100%', <br> sHeight: '100%', <br> bAppMode: '', <br> bShowBackground: false, <br> bCloseBackground: true, <br> bCloseButton: '', <br> beforeOpen() { <br> // Do stuff <br> }, <br> afterOpen() { <br> // Do stuff <br> }, <br> beforeClose() { <br> // Do stuff <br> }, <br> afterClose() { <br> // Do stuff <br> }, <br> beforeUpdate() { <br> // Do stuff <br> }, <br> afterUpdate() { <br> // Do stuff <br> }, <br> }); <br>  

Options, events and callbacks

Option	Default value	Description
`sTitle`	none	Title of your overlayer. Wrapped in `H2` by default. Can contain HMTL code
`sContent`	none	Just HTML, and inline element, full or local URL (depending on the method)
`sMethod`	default	Type of overlayer: notification (default), dialog, inline, iframe or ajax
`sTarget`
`sHeight`
`bAppMode`