概述
  SimpleModal是一个轻量级的jQuery插件,它为模态窗口(modal dialog)的开发提供了一个强有力的接口。可以把它当作模态窗口(modal dialog)的框架。SimpleModal给予你(创建你能够想像到的任何东西的)灵活性,然而却屏蔽了UI开发中的跨浏览器相关问题。

用法 转自:高景洋个人官网(www.gjy.nev.cn)
  SimpleModal提供了两种简单方法来调用模态窗口(modal dialog)。
  在作为一个链式的(chained)jQuery函数,你可以在一个jQuery元素上调用modal()函数,之后用这个元素的内容来显示一个模态窗口。例如:

1 $("#element-id").modal();
  在作为一个单独函数时,通过传递一个jQuery对象,DOM元素或纯文本(可以包含HTML)来创建一个模态窗口(modal dialog),例如:

1 $.modal("<div><h1>SimpleModal</h1></div>");
  以上的两种方法都可以接受一个可选项参数,例如:

1 $("#element-id").modal({options});
2 $.modal("<div><h1>SimpleModal</h1></div>", {options});
因为SimpleModal不仅仅是一个模态窗口框架(modal dialog framework),以上的两个例子只是创建非常基本的没有样式模态窗口(modal dialog)。可以通过外部CSS或选项中的属性(properties in options)来应用样式,查看下面的选项(option section)以获得一个可用的选项列表。
样式
可以通过外部CSS,选项对象(options object)或两个一起来应用样式。modal overlay,container,data元素的CSS选项分别是:overlayCss,containerCss,dataCss,它们都是键值对(Key/Value)属性。SimpleModal为显示一个模态窗口(modal dialog)处理设置必要的CSS,另外它动态地把模态窗口置于屏幕中间,除非预先使用了position选项。SimpleModal在内部定义了如下CSS classes:simplemodal-overlay,simplemodal-container,simplemodal-wrap(如果内容比 container大,那么它将自动设置overflow为true)和simplemodal-data。
注:
例子SimpleModal的closeHTML选项默认声明一个用于关闭模态窗口的图片样式:modalcloseImg,因为它被定义在选项里面,不能通过选项来应用样式,所以一个外部CSS定义是必需的。

1 #simplemodal-container a.modalCloseImg { 

 2 background:url(/img/x.png) no-repeat; /* adjust url as required */ 

 3 width:25px; 

 4 height:29px; 

 5 display:inline; 

 6 z-index:3200; 

 7 position:absolute; 

 8 top:-15px; 

 9 right:-18px; 

10 cursor:pointer; 

11 } 

 IE6,你可能想使用PNG: 


 1 <!--[if lt IE 7]> 

 2 <style type='text/css'> 

 3 #simplemodal-container a.modalCloseImg { 

 4 background:none; 

 5 right:-14px; 

 6 width:22px; 

 7 height:26px; 

 8 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( 

 9 src='img/x.png', sizingMethod='scale' 

10 ); 

11 } 

12 </style> 

13 <![endif]--> 


下载 

 SimpleModal托管于Google Code上:DOWNLOAD 

 有两个可用的版本:1、完整版:包含注释并且带有易于阅读的格式;2、最小版:包含注释但是删除了格式,不易于阅读。完整版可以用来学习和测试,最小版可以用作产品使用。 

文档 


选项和回调 

选项 

 以下是当前选项的一个列表,默认值在[Type:Value]中说明 

 appendTo [String:'body'] 

 focus [Boolean:true] 把焦点保持在模态窗口(modal dialog)上 

 opacity [Number:50] 设置overlay div的不透明度,1-100 

 overlayId [String:'simplemodal-overlay'] overlay div的DOM元素的ID 

 overlayCss [Object:{}] overlay div的CSS样式 

 containerId [String:'simplemodal-container'] container div的DOM元素的ID 

 containerCss [Object:{}] container div的CSS样式 

 dataId [String:''] data div的DOM元素的ID 

 dataCss [Object:{}] data div的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]