mBox Documentation

With mBox.Modal you can easily set up modal dialog windows.

Attach modal dialogs to elements

Attaching your modal dialogs works the same way as with mBox.Core, use the option attach:

new mBox.Modal({
    title: 'My modal dialog',
    content: 'This is a simple modal dialog window.',
    attach: 'myModalDialog1'
});

You can drag and move the window on its title if you have installed MooTools More/Drag.

Add Buttons

You can easily add buttons to your dialogs footer:

new mBox.Modal({
    title: 'Modal dialog with buttons',
    content: '<span id="text">Click submit to change the text color.</span>…',
    buttons: [
        { title: 'Cancel' },
        { title: 'Submit',
          event: function() {
              $('text').setStyle('color', ['red', 'blue', 'green', 'purple'].getRandom());
          }
        }
    ],
    attach: 'myModalDialog2'
});

Refer to section options to see what options you can give your buttons.

Confirm Dialog

If you include mBox.Modal.Confirm.js you can give your elements an attribute which will open a confirm window:

function myFunction() {
    // The action when clicking on "Yes"
}
 
<a href="javascript:myFunction();" data-confirm="Do you really want to do this?">Click me</a>
<a … data-confirm-action="myFunction();" data-confirm="Do you …?|Yes, please|No, thanks">Click me</a>

Your dialogs will evaluate the elements data-confirm-action attribute or its href value if it's a link.
To change the title of the buttons, add the new titles separated with | to data-confirm.
MBox.Modal.Confirm works nicely together with mBox.Notice.

Options

In addition to mBox.Core Options you can use following options for your modal dialogs:

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().