JQuerySimpleModal

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

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:
  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, 8
  • Firefox 2, 3, 4
  • Opera 9
  • Safari 3

Examples

email Contact: opens a modal dialog located in the #helpText div.

email Contact (async): opens a modal dialog with content loaded asynchronously from a named section of a topic

Contact

First Name:

Last Name:

Aenean neque lectus, gravida nec, egestas at, scelerisque quis, lectus. Suspendisse potenti. Morbi id urna at magna tristique mollis. Praesent fermentum sollicitudin turpis. Sed tincidunt gravida est. Morbi non nibh ullamcorper lorem consequat tristique. Ut rutrum, diam dignissim congue tristique, mauris velit tristique velit, sed laoreet dui mi at ante. In dictum massa et quam. Aenean imperdiet elit ut sem. Quisque tincidunt tortor at augue. Praesent eu nunc non dolor sagittis euismod. In semper porttitor tellus.

Sed fermentum justo nec lorem. Morbi augue. Sed tristique semper velit. Nulla facilisi. Maecenas fermentum. In massa magna, egestas non, lobortis dictum, feugiat vel, eros. Vivamus cursus accumsan enim. Duis vestibulum ipsum. Proin at ligula et est vehicula fringilla. Integer tortor risus, porttitor quis, posuere sed, sagittis non, sapien. Donec ornare imperdiet eros. Sed id neque et tellus porta commodo. Integer non neque. Morbi porttitor nisi ultricies lectus. Suspendisse potenti. Vestibulum ornare tellus vulputate ligula. Nam faucibus volutpat nisi. Morbi rhoncus enim ut dolor. Donec congue posuere dui. Aliquam mi nunc, lobortis eu, pulvinar et, aliquet vitae, diam. Aliquam in tortor. Nam egestas imperdiet lectus. Morbi vitae neque. Praesent pellentesque dignissim lacus. Proin neque. Phasellus fermentum sagittis dolor. Nulla enim.

In hac habitasse platea dictumst. Etiam sit amet tortor in mi laoreet tincidunt. Aliquam cursus pharetra neque. Vivamus pellentesque lacus ac risus. Nam aliquet molestie enim. Maecenas blandit, tortor nec tincidunt lacinia, tortor velit venenatis velit, et commodo leo tortor nec est. Proin at mi. Ut magna est, venenatis et, eleifend sit amet, vulputate eu, mi. Suspendisse sed arcu at orci scelerisque lobortis. Sed venenatis pede quis nibh. Vivamus at nulla. Etiam congue. Ut eu eros. Nullam tempor rutrum massa.
Submit Cancel

Edit • Attach • Print version • History: r1 • Backlinks • View wiki text • More topic actions