SimpleModal is a lightweight jQuery plugin that provides a simple
interface to create a modal dialog.
Note: please consider using
UI::Dialog instead.
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:
- 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.
- 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, 8
- Firefox 2, 3, 4
- Opera 9
- Safari 3
Examples
No such plugin simplemodal
Contact: opens a modal dialog located in the #helpText div.
Contact (async): opens a modal dialog with content loaded asynchronously from a named section of a topic