jQuery控件 SimpleModal（弹出层带遮罩控件)
zhangyang0 2011-09-15
http://www.gjy.nev.cn/a1article-492186-1.html
概述
SimpleModal是一个轻量级的jQuery插件，它为模态窗口（modaldialog）的开发提供了一个强有力的接口。可以把它当作模态窗口（modaldialog）的框架。SimpleModal给予你（创建你能够想像到的任何东西的）灵活性，然而却屏蔽了UI开发中的跨浏览器相关问题。
用法转自：高景洋个人官网（www.gjy.nev.cn）
SimpleModal提供了两种简单方法来调用模态窗口（modaldialog）。
在作为一个链式的（chained）jQuery函数，你可以在一个jQuery元素上调用modal()函数，之后用这个元素的内容来显示一个模态窗口。例如：
1$("#element-id").modal();
在作为一个单独函数时，通过传递一个jQuery对象，DOM元素或纯文本（可以包含HTML）来创建一个模态窗口（modaldialog），例如：
1$.modal("<div><h1>SimpleModal</h1></div>");
以上的两种方法都可以接受一个可选项参数，例如：
1$("#element-id").modal({options});
2$.modal("<div><h1>SimpleModal</h1></div>",{options});
因为SimpleModal不仅仅是一个模态窗口框架（modaldialogframework），以上的两个例子只是创建非常基本的没有样式模态窗口（modaldialog）。可以通过外部CSS或选项中的属性（propertiesinoptions）来应用样式，查看下面的选项（optionsection）以获得一个可用的选项列表。
样式
可以通过外部CSS，选项对象（optionsobject）或两个一起来应用样式。modaloverlay,container,data元素的CSS选项分别是：overlayCss,containerCss,dataCss，它们都是键值对（Key/Value）属性。SimpleModal为显示一个模态窗口（modaldialog）处理设置必要的CSS，另外它动态地把模态窗口置于屏幕中间，除非预先使用了position选项。SimpleModal在内部定义了如下CSSclasses：simplemodal-overlay，simplemodal-container，simplemodal-wrap（如果内容比container大，那么它将自动设置overflow为true）和simplemodal-data。
注：
例子SimpleModal的closeHTML选项默认声明一个用于关闭模态窗口的图片样式：modalcloseImg，因为它被定义在选项里面，不能通过选项来应用样式，所以一个外部CSS定义是必需的。
1#simplemodal-containera.modalCloseImg{
2background:url(/img/x.png)no-repeat;/*adjusturlasrequired*/
3width:25px;
4height:29px;
5display:inline;
6z-index:3200;
7position:absolute;
8top:-15px;
9right:-18px;
10cursor:pointer;
11}
IE6,你可能想使用PNG：
1<!--[ifltIE7]>
2<styletype='text/css'>
3#simplemodal-containera.modalCloseImg{
4background:none;
5right:-14px;
6width:22px;
7height:26px;
8filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
9src='img/x.png',sizingMethod='scale'
10);
11}
12</style>
13<![endif]-->
下载
SimpleModal托管于GoogleCode上：DOWNLOAD
有两个可用的版本：1、完整版：包含注释并且带有易于阅读的格式；2、最小版：包含注释但是删除了格式，不易于阅读。完整版可以用来学习和测试，最小版可以用作产品使用。
文档
选项和回调
选项
以下是当前选项的一个列表，默认值在[Type:Value]中说明
appendTo[String:'body']
focus[Boolean:true]把焦点保持在模态窗口（modaldialog）上
opacity[Number:50]设置overlaydiv的不透明度，1-100
overlayId[String:'simplemodal-overlay']overlaydiv的DOM元素的ID
overlayCss[Object:{}]overlaydiv的CSS样式
containerId[String:'simplemodal-container']containerdiv的DOM元素的ID
containerCss[Object:{}]containerdiv的CSS样式
dataId[String:'']datadiv的DOM元素的ID
dataCss[Object:{}]datadiv的CSS样式
minHeight[Number:200]container的最小高度
minWidth[Number:200]container的最小宽度
maxHeight[Number:null]container的最大高度，如果没有说明则使用window的高度
maxWidth[Number:null]container的最大宽度，如果没有说明则使用window的宽度
autoResize[Boolean:false]当window调整大小时调整container的大小，使用时需小心，因为它可能会发生不可预知的效果。
zIndex[Number:1000]z-Index的起始值
close[Boolean:true]如果为true，那么closeHTML,escClose,overClose将被使用，反之则不使用。
closeHTML[String:'']
closeClass[String:'simplemodal-close']
escClose[Boolean:true]
overlayClose[Boolean:false]
position[Array:null]
persist[Boolean:false]
onOpen[Function:null]
onShow[Function:null]
onClose[Function:null]
回调转自：高景洋个人官网（www.gjy.nev.cn）
回调函数使用JavaScript的apply函数来调用
