A modal dialog box plugin for jQuery
The main purpose of this plugin is to provide a way to create modal dialogs in a simple and straightforward way without resorting to jQueryUI or other, more powerful but bigger and complex plugins. Modialog weights only 3KB and has some unique features too :)
Claudio Cicali [email protected]
Demo page with a link to open a dialog box
First of all you need to include the JavaScript for jQuery and this plugin.
In your layout create an hidden DIV to use as the Modialog container
<div id="dialog"></div>
Modialog automatically injects some HTML elements in your DIV (for the caption and the close icon). You then probably need another wrapper inside the dialog (i.e.: for padding). Something like this:
<div id="dialog"><div class="content"></div></div>
A complete dialog (with the markup added by Modialog) will then be:
<div id="dialog">
<div class="modialog-caption"><div class="modialog-icon"></div></div>
<div class="content"></div>
</div>
Add a CSS: a minimal CSS is really needed for the dialog to work as intended. Please take a look at the source code of the provided demo.html for an actual example. You need at the very least to style the .modialog-overlay (give it a background-color)
Now use JavaScript to initialize the plugin and open the dialog. You will call modialog with (or without) a configuration literal object and then call it with a command (as "open" or "close") (some examples follows)
// Example 1: With no configuration at all
$('#dialog').modialog();
$('#dialog').modialog('open');
// Example 2: Setting up a callback for the "beforeClose" event. Request confirmation to the user
$('#dialog').modialog({
onBeforeClose: function() {
return confirm("Are you sure?");
}
});
$('#dialog').modialog('open');
// Example 3: Open the dialog a little higher
$('#dialog').modialog({
offsetTop: -100px,
onBeforeClose: function() {
return confirm("Are you sure?");
}
});
$('#dialog').modialog('open');
// Example 4: programmatically closing the dialog
$('#dialog').modialog('close');
// Example 5: close the dialog, executing a callback AFTER
$('#dialog').modialog('close', function() {
alert("Dialog has been just closed");
});
// Example 6: fill the body of the dialog upon opening it
$('#dialog').modialog('open', {
// "this" is the dialog jQuery object
this.html("I'm the <em>body</em> of the dialog");
});
// Example 7: fill the body of the dialog upon opening it, via ajax
$('#dialog').modialog('open', function() {
// "this" is the dialog jQuery object
this.find('.content').load('content.php', function() {
// "this" is the dialog jQuery object.
this.modialog('center')
...
})
});
// Example 8: fill the body of the dialog via ajax and opens it using the "load" command
// (equivalent to example 7, but shorter)
App.$.dialog.modialog('load', '.content', "content.php", function() {
// The dialog is automatically opened and centered
});
// Example 9: programmatically change a property just before opening it
$('#dialog').modialog('set', {offsetTop: 0});
$('#dialog').modialog('open');
Important: every callback receives "this" as the dialog itself as a jQuery object.
This plugin has been developed with (d|r)ecent browsers in mind. Anyway it works fine even in IE7.
The main purpose is to stay small, not being fancy, so there is no native support for SELECTs madness or Flash akwardness :)
Here is a list of hints that I borrowed from Simplemodal, a similar, bigger plugin:
Copyright (c) 2011 Claudio Cicali
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html