轻量级功能强大的jquery弹窗插件SimpleModal

SimpleModal是一款提供功能强大的弹出模拟对话框jQuery插件，也就是一款jquery弹窗插件，该插件使用简单，操作容易，窗体API定义丰富。

插件官方页面：http://www.ericmmartin.com/projects/simplemodal/

插件演示地址：http://www.ericmmartin.com/projects/simplemodal-demos/

插件下载页面：http://code.google.com/p/simplemodal/downloads/list

使用教程：

插件提供两个方法调用弹窗。

方法一：使用插件函数modal()，示例：

$("#element-id").modal();

方法二：直接添加HTML代码，示例：

$.modal("<div><h1>SimpleModal</h1></div>");

以上两种方法都可以使用自定义选项，代码结构分别如下：

方法一：

$("#element-id").modal({options}); 

方法二：

$.modal("<div><h1>SimpleModal</h1></div>", {options});

options参数说明：

• 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
• overlayCss [Object:{}]
  The CSS styling for the overlay div
• containerId [String:'simplemodal-container']
  The DOM element id for the container div
• containerCss [Object:{}]
  The CSS styling for the container div
• dataId [String:'simplemodal-data']
  The DOM element id for the data div
• dataCss [Object:{}]
  The CSS styling for the data div
• 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?
• position [Array:null]
  Position of container [top, left]. Can be number of pixels or percentage
• persist [Boolean:false]
  Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls, if false, the data will be reverted to its original state.
• modal [Boolean:true] (Added in 1.3.4. Name changed from transient in 1.3.5))
  User will be unable to interact with the page below the modal or tab away from the dialog. If false, the overlay, iframe, and certain events will be disabled allowing the user to interact with the page below the dialog.
• onOpen [Function:null]
  The callback function used in place of SimpleModal's open
• onShow [Function:null]
  The callback function used after the modal dialog has opened
• onClose [Function:null]
  The callback function used in place of SimpleModal's close

中文参考：

• appendTo ：将弹出框添加到的父容器，参数为css选择器，默认为body；
• focus：集中在第一个可见的启用元素？
• opacity ：透明度
• overlayId ：遮罩层id
• overlayCss ：{Object}定义遮罩层样式
• containerId ：弹出窗体容器id
• containerCss ：定义容器的样式
• dataId ：内容层id
• containerCss ：内容层的样式
• minHeight ：最小高度
• minWidth ：最小宽度
• maxHeight ：最大高度maxWidth ：最大宽度
• autoResize：是否自适应大小
• zIndex ：弹出层的z-index
• close ：是否允许关闭
• closeHTML ：自定义关闭按钮
• closeClass ：关闭层样式
• overlayClose ：点击遮罩层是否关闭弹出窗体
• position ：数组 [top, left] 自定义弹出窗体位置
• onOpen ：弹出窗体打开时候的回调函数
• onShow ：弹出窗体显示时候的回调函数
• onClose ：弹出窗体关闭时候的回调函数

示例：

$("#sample").modal({
	opacity:80,
	overlayCss: {backgroundColor:"#fff"}
});

更多用法请看官方使用说明。