SimpleModal provides 2 simple ways to invoke a modal dialog.
As a chained jQuery function, you can call the modal()
function on a jQuery element and a modal dialog will be displayed using the contents of that element. For example:
$("#element-id").modal();
As a stand-alone function, a modal dialog can be created by passing a jQuery object, a DOM element, or a plain string (which can contain HTML). For example:
$.modal("<div><h1>SimpleModal</h1></div>");
Both of the methods described above, also accept an optional options object (nice tongue-twister, huh?). Using the examples above:
$("#element-id").modal({options}); $.modal("<div><h1>SimpleModal</h1></div>", {options});
Because SimpleModal is more of a modal dialog framework, both of the examples above would create very basic, unstyled, modal dialogs. Styling can be done through external CSS or through properties in the options object. See the Options section below for a detailed list of the available options.
Styles can be applied through external CSS, the options object, or both. The CSS options for the modal overlay, container, and data elements are:
overlayCss
, containerCss
and dataCss
, all which take a key/value object of properties. See the
jQuery CSS Docs for details.
SimpleModal handles setting the necessary CSS for displaying the modal dialog. In addition, SimpleModal dynamically centers the modal dialog, unless the
position
option is used, which takes precedence.
SimpleModal internally defines the following CSS classes: simplemodal-overlay
, simplemodal-container
, simplemodal-wrap
(SimpleModal will automatically set the
overflow
to auto if the content gets larger than the container), and simplemodal-data
.