JQuerySimpleModal

Homepage: http://www.ericmmartin.com/projects/simplemodal
Author(s): Eric Martin
Version: 1.2.3

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

Description

The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

There are two ways to call SimpleModal:

1. As a chained function on a jQuery object, like $('#myDiv').modal();. This call would place the DOM object, #myDiv, inside a modal dialog. Chaining requires a jQuery object. An optional options object can be passed as a parameter.
2. As a stand-alone function, like $.modal(data). The data parameter is required and an optional options object can be passed as a second parameter. This method provides more flexibility in the types of data that are allowed. The data could be a DOM object, a jQuery object, HTML or a string.

A SimpleModal call can contain multiple elements, but only one modal dialog can be created at a time. Which means that all of the matched elements will be displayed within the modal container.

SimpleModal internally sets the CSS needed to display the modal dialog properly in all browsers, yet provides the developer with the flexibility to easily control the look and feel. The styling for SimpleModal can be done through external stylesheets, or through SimpleModal, using the overlayCss and/or containerCss options.

SimpleModal has been tested in the following browsers:

• IE 6, 7
• Firefox 2, 3
• Opera 9
• Safari 3

Examples

$('<div>my data</div>').modal({options});
$('#myDiv').modal({options});
jQueryObject.modal({options});

$.modal('<div>my data</div>', {options});
$.modal('my data', {options});
$.modal($('#myDiv'), {options});
$.modal(jQueryObject, {options});
$.modal(document.getElementById('myDiv'), {options});