Thickbox是jQuery的一個插件plugins；它可以實習彈出框效果；這個效果比浏覽器自定義的效果要好的多，並且還可以自定義彈出框裡的內容；
開發者：Cody Lindle
Thickbox的官方網址：http://jquery.com/demo/thickbox/
下載：可以在官方網址點擊thickbox.js 、thickbox-compressed.js、ThickBox.css 、loadingAnimation.gif鏈接；其中thickbox-compressed.js是壓縮版的JavaScript代碼，loadingAnimation.gif為彈出框文件載入時的等待動畫；ThickBox.css的css樣式文件，thickbox.js是完整代碼；
下面介紹一下使用方法：
實現需要在head標簽裡加入下列JavaScript文件；現將jQuery和thickbox下載，然後設置相應路徑；
1 2
<script type="text/javascript" src="文件夾路徑/jquery.js"></script> <script type="text/javascript" src="文件夾路徑/thickbox.js"></script>
將css文件和loadingAnimation.gif及macFFBgHack.png也上傳到你的網站；接下來加入css文件到head標簽裡
同時要在css裡修改1
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
將url(macFFBgHack.png)設置為你的文件路徑；
官方Demo
有單個圖片、圖片展覽、內容、iframe和Ajax內容；
1.單張圖片是建立一個a標簽，給鏈接a加個class名為thickbox，同時將要顯示圖片包含在鏈接裡如下：
<a href="images/single.jpg" class="thickbox"><img src="images/single_t.jpg" /></a>
2、圖片展覽同樣建立多個a標簽，給鏈接a加個class名為thickbox，還有給rel設置相同的值，
1 2 3 4
<a href="images/plant1.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a> <a href="images/plant2.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a> <a href="images/plant3.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a> <a href="images/plant4.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>
3、顯示內容也要建立一個a標簽或者input ，給它加個class名為thickbox，為input標簽設置alt=”#TB_inline?height=高度&width=寬度&inlineId=要顯示內容id”或a標簽設置href=”#TB_inline?height=高度&width=寬度&inlineId=要顯示內容id”&modal=true”,其中modal=true為設置另一種關閉模式；默認不設置；接著要給需要顯示的內容加上id=”要顯示內容id”;id自己設定要與上邊鏈接為同一值；高度、寬度根據實際需要設置如下,可以事先將要顯示內容css設置為：display:none;
1 2 3 4
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" type="button" value="Show" class="thickbox" /> <div id="myOnPageContent">要顯示的內容</div> <a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a> <div id="hiddenModalContent">要顯示的內容</div>
4.iframe建立一個a標簽，給鏈接a加個class名為thickbox，a設置標簽的href=”要顯示的網頁地址或者php文件地址?keepThis=true&TB_iframe=true&height=高度&width=寬度”；還有另一種關閉模式：href=”要顯示的網頁地址或者php文件地址?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=高度&width=寬度&modal=true”
1 2 3
<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" class="thickbox">Example 1</a> <a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500" class="thickbox">Example 2</a> <a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" class="thickbox">Open iFrame Modal</a>
5.Ajax內容建立一個a標簽，給鏈接a加個class名為thickbox，a設置標簽的href=”要顯示的ajax文件地址?height=高度&width=寬度，例如：
1
<a href="ajaxOverFlow.html?height=300&width=300" class="thickbox">Scrolling content</a>
下面是一個內容顯示的例子：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]