jQuery控件 SimpleModal（彈出層帶遮罩控件)

http://www.gjy.nev.cn/a1article-492186-1.html

概述
　　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]


回調 轉自：高景洋個人官網（www.gjy.nev.cn）
回調函數使用JavaScript的apply函數來調用