USAGE（使用）

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:

就像jquery的chained链式函数一样使用，简单的使用方式如下

$("#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:

标准的使用方式，可以通过传递一个jquery对象，一个DOM元素，或者一个包含html的字符串来创建一个modal

$.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});

options是指他提供的一些option，样式可以通过额外的样式或者通过option的属性来修改

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.

TYLING（样式）

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.** #properties

可以通过额外的css样式，option（如overlayCSS）或者两者来修改样式，所有的修改都是以key/value的对象属性来修改的。可以参考jquery的css修改方式，是一样的。

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 .

simpleModal会内置必须的css样式来作为默认显示，并且会自动将超过content大小的container的css属性overflow设置为auto，所以我们可以直接使用simplemodal来实现模态，默认的是一个灰度的遮罩，然后中心显示,如下图（红色为overlay遮罩，绿色是container，黄色是data）

，另外这里提到的默认自带一个关闭的X的图像，其实已经没有必要了，本身也支持文字的X，重点在于modalCloseImg，不过这里说了一种设置关闭按钮的方法，

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; } OPTIONS & CALLBACKS OPTIONS The following is a list of current options. Default values are indicated with: [Type:Value] appendTo [String:'body']

The jQuery selector to append the elements to. For ASP.NET, use ‘form’.

focus [Boolean:true] (Changed in 1.4)

Focus in the first visible, enabled element?

opacity [Number:50]

The opacity value for the overlay div, from 0 – 100

overlayId [String:'simplemodal-overlay']

The DOM element id for the overlay div

这个就是覆盖层的div的ID，就是那个遮罩，灰色那个。

overlayCss [Object:{}]

The CSS styling for the overlay div

containerId [String:'simplemodal-container']

The DOM element id for the container div

这个就是显示容器的ID，就是你想要显示的内容的那个div

containerCss [Object:{}]

The CSS styling for the container div

dataId [String:'simplemodal-data']

这个就是显示内容的ID，就是你想要在显示内容的div里面的内容div

The DOM element id for the data div

dataCss [Object:{}]

The CSS styling for the data div

overlay，container，data每一个都配有css修改的option

minHeight [Number:null]

The minimum height for the container

minWidth [Number:null]

The minimum width for the container

maxHeight [Number:null]

The maximum height for the container. If not specified, the window height is used.

maxWidth [Number:null]

The maximum width for the container. If not specified, the window width is used.

autoResize [Boolean:false] (Changed in 1.4)

Resize the container if it exceeds the browser window dimensions?

autoPosition [Boolean:true] (Changed in 1.4)

Automatically position the container upon creation and on window resize?

zIndex [Number: 1000]

Starting z-index value

close [Boolean:true]

If true, closeHTML, escClose and overlayClose will be used if set. If false, none of them will be used.

closeHTML [String:'']

The HTML for the default close link. SimpleModal will automatically add the closeClass to this element.

closeClass [String:'simplemodal-close']

The CSS class used to bind to the close event

escClose [Boolean:true]

Allow Esc keypress to close the dialog?

overlayClose [Boolean:false]

Allow click on overlay to close the dialog?

很有人性化的设置了ESC键退出modal或者点击overlay层退出的方式。

position [Array:null]
Position of container [top, left]. Can be number of pixels or percentage

默认是窗口居中的，如果要设置就是用这个参数。

persist [Boolean:false]