Questions tagged [simplemodal]

Overview

SimpleModal is a lightweight jQuery plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

Usage

SimpleModal provides two 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.

Styling

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 documentation 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.

• Note: SimpleModal's default closeHTML option declares the modalCloseImg class in order to display an image for closing the dialog. Download the image. Because it is defined in an option, it cannot be styled through the options - an external CSS definition is required:

  #simplemodal-container a.modalCloseImg {
      background:url(/img/x.png) no-repeat; /* Adjust URL as required */
      width:25px;
      height:29px;
      display:inline;
      z-index:3200;
      position:absolute;
      top:-15px;
      right:-18px;
      cursor:pointer;
  }
  

For Internet Explorer 6, you might want to apply the PNG fix:

<!--[if lt IE 7]>
<style type='text/css'>
    #simplemodal-container a.modalCloseImg {
        background:none;
        right:-14px;
        width:22px;
        height:26px;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='img/x.png', sizingMethod='scale'
        );
    }
</style>
<![endif]-->

Demos

In addition to the examples below, I have a collection of demos that feature the different capabilities of SimpleModal:

View Demos

Download

SimpleModal is hosted on Google Code:

Download SimpleModal

There are two versions available; a full source version that contains comments and is formatted for readability, and a minified version with all comments and formatting removed. The full version is recommended for learning and testing, the minified version is for production use.

Archives

Previous version of SimpleModal documentation: v1.2.x, v1.1.x, v1.0.x.

Source