ThickBox 遮罩層

ThickBox 是基於 jQuery 用 JavaScript 編寫的 網頁UI對話窗口小部件. 它能夠用來展現單一圖片, 若干圖片, 內嵌的內容, iframed的內容, 或以 AJAX 的混合 modal 提供的內容.
查看實例演示
特性:

• ThickBox 是用超輕量級的 jQuery 庫 編寫的. 壓縮過 jQuery 庫只15k, 未壓縮過的有39k.
• ThickBox 的 JavaScript 代碼和 CSS 文件只佔12k. 因此壓縮過的 jQuery 代碼和 ThickBox 總共只有27k.
• ThickBox 能從新調整大於瀏覽器窗口的圖片.
• ThickBox 的多功能性包括(圖片,iframed 的內容,內嵌的內容,AJAX 的內容).
  • 展現單一圖片（single image）
  • 展現圖片集（multiple images）
  • 展現內嵌內容（inline content）
  • 展現被iFrame的內容（iframed content）
  • 展現AJAX內容（AJAX content）
  • 其餘：教程自己還自帶了一個很酷的JS跳轉腳本
• ThickBox 能隱藏 Windows IE 6 裏的元素.
• ThickBox 能在使用者滾動頁面或改變瀏覽器窗口大小的同時始終保持居中. 點擊圖片, 覆蓋層, 或關閉連接能移除 ThickBox.
• ThickBox 的創做者決定動畫應該因人而異, 因此 ThickBox 再也不使用動畫了. 這是特性嗎? 哦, 有人說是呀.

如何實現 ThickBox :
1. ThickBox 要求使用 jQuery JavaScript 庫; 正因如此, 你須要外調 jquery.js 文件在你的網頁的 head 元素內, 接着還要外調 thickbox.js 文件 (注意: jquery.js 必須放在調用 資源的第一位). 例子以下:
<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/thickbox.js"></script>
一旦你外調了 .js 文件, 打開 thickbox.js 並尋找 加載圖片的名字 (loadingAnimation.gif). 找到後, 根據它在你 服務器上的位置肯定更改它的路徑.
2. 在你的網頁中外調 ThickBox CSS 文件. 例子以下:
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
或
<style type="text/css" media="all">@import "path-to-file/thickbox.css";</style>
或, 打開 thickbox.css 文件並複製粘貼樣式到你現有的樣式表中.
3. 觀看例子, 學習使用不一樣的方法調用 ThickBox，

http://www.blueidea.com/articleimg/2006/08/3912/thickbox.html