mBox Documentation

mBox.Core

id: '',
The id of your mBox, defaults to mBox_1, mBox_2, mBox_3…
theme: '',
Name of your mBoxes theme.
addClass: {
    wrapper: '',
    container: '',
    content: '',
    title: '',
    footer: ''
},
Add additional classes to the wrapper, container, content, title or footer.
To add a class only to the wrapper, provide a string, e.g. addClass: 'myClass'.
setStyles: {
    wrapper: {},
    container: {},
    content: {},
    title: {},
    footer: {}
},
Set specific styles to the wrapper, container, content, title or footer.
To set styles only to the wrapper, provide a style object, e.g. setStyles: { color: 'red' }.
target: $(window),
The target element where your mBox will be positioned at. You can use an element id, element reference, the $(window) object or 'mouse' to stick the mBox to your pointer.
attach: null,
The elements which will open / close the mBox.
Use an element id, element reference or an elements class name.
event: 'click',
The event which will open / close the mBox. You can use 'click' or 'mousenter'.
preventDefault: false,
Prevents the default event to fire when clicking on an attached element. E.g. Prevents a link to follow the href, when the mBox is attached to a link.
width: 'auto',
height: 'auto',
The width and height of the content area.
zIndex: 8000,
The z-index of your mBox.
content: null,
The content of your mBox.
You can use a string, an element id, an element reference or a class-name. Those elements will be grabbed by the mBox and their style display: none will be set to display: ''
setContent:
    'data-setContent',
If the element, which opens your mBox, has the attribute data-setContent, this attributes value is the new content:
data-setContent="New content" will set the content of your mBox to 'New content'
data-setContent="elementID" will hide all elements in the content area, then inject and display the element with id="elementID"
title: null,
Adds a title to your mBox.
You can use a string, an element id or an element reference.
footer: null,
Adds a footer to your mBox.
You can use a string, an element id or an element reference.
draggable: false,
Set to true, to make your mBox dragabble when clicking on title.
position: {
    x: 'center',
    y: 'center'
},
Defines the position of your mBox in relation to the target element.
x defnes the horizontal position, y the vertical.
If you want to set the position outside or inside the target element you need to use an array:
E.g. x: ['right', 'outside'] or y: ['top', 'inside']
Sometimes you need to tell the mBox which attribute to use (left or right, top or bottom). To do so use a third variable in your position array:
E.g. x: ['left', 'inside', 'right'] or y: ['top', 'outside', 'bottom']
offset: {
    x: 0,
    y: 0
},
The horizontal or vertical offset to add or substract.
fixed: true,
The position of your mBox adjusts when scrolling or when you resize the window.
pointer: false,
If at least one of the positions is "outside", you can add a pointer to your mBox.
To adjust the pointers position, use 'right', 'left', 'top', 'bottom' or 'center'.
To add an offset you need to use a second variable in an array, e.g. ['left', 10].
fade: {
    open: true,
    close: true
},
Set to false to open / close the mBox instantly without fading.
To disable fading altogether, you can also set fade: false
fadeDuration: {
    open: 200,
    close: 300
},
The fade duration.
You can also set fadeDuration: 200 to use this value for opening and closing.
overlay: false
Set to true to add an overlay.
overlayStyles: {
    color: 'black',
    opacity: 0.75
},
Sets the color and opacity of your overlay.
overlayFadeDuration: 100,
The overlays fade duration.
transition: {
    open: null,
    close: null
},
Adds a transition when your mBox opens or closes.
Following shortcuts are availible: 'flyin', 'flyout', 'flyinout', 'flyoutin', 'bounce', 'bouncefly'
You can also define your own transitions:
E.g. {open: {transition: 'bounce:in', property: 'top', duration: 400, difference_start: 50, difference_end: 0}
closeOnEsc: true,
Closes your mBox when pressing esc.
closeOnClick: false,
Closes your mBox when clicking anywhere.
closeOnBoxClick: false,
Closes your mBox when clicking on the mBox itself.
closeOnWrapperClick: false,
Closes your mBox when clicking on the wrapper (but won't close when clicking on any child)
closeOnBodyClick: true,
Closes your mBox when clicking anywhere except on the mBox itself.
closeOnMouseleave: true,
Closes your mBox when the mouse leaves the mBox area.
closeInTitle: false,
Adds a close button into the title area if there is one.
delayOpen: 0,
Delay opening your mBox in ms.
delayClose: 0,
Delay closing your mBox in ms.
delayOpenOnce: true,
delayOpen will be ignored if your mBox isn't completely closed.
constructOnInit: true,
When set to false your mBox will be constructed onOpen rather then when it's being initialised. Might add some performance when working with a lot of mBoxes.
openOnInit: false
Open your mBox automatically once it's initialized.

mBox.Modal

buttons: [
    { title: 'My Button 1' },
    {
        title: 'My Button 2',
        addClass: 'button',
        setStyles: {
            marginLeft: 20
        },
        event: function() {
            this.close();
        },
        id: 'my_button'
    }
]
Adds buttons to your mBoxes footer.
The option event will be evaluated when you click on the button, it defaults to this.close().

mBox.Notice

type: 'default',
The type of your notice.
You can use one of the following: 'ok', 'error', 'info' or 'notice'
move: true,
Set move to false if you don't want your notices to move into the window.
moveDuration: 500
The transition duration when move is true