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