【图】JS教程:thickbox弹出框效果

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下载，然后设置相应路径；

script type="text/javascript" src="文件夹路径/jquery.js"/scriptscript type="text/javascript" src="文件夹路径/thickbox.js"/script

将css文件和loadingAnimation.gif及macFFBgHack.png也上传到你的网站；接下来加入css文件到head标签里

同时要在css里修改

.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设置相同的值，

a href="images/plant1.jpg" class="thickbox" rel="gallery-plants"img src="images/plant1_t.jpg" alt="Plant 1" //aa href="images/plant2.jpg" class="thickbox" rel="gallery-plants"img src="images/plant2_t.jpg" alt="Plant 2" //aa href="images/plant3.jpg" class="thickbox" rel="gallery-plants"img src="images/plant3_t.jpg" alt="Plant 3" //aa 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;

input alt="#TB_inline？height=300&width=400&inlineId=myOnPageContent" type="button" value="Show" class="thickbox" /div id="myOnPageContent"要显示的内容/diva href="#TB_inline？height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox"Show hidden modal content./adiv 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

a href="ajax.PHP？keepThis=true&TB_iframe=true&height=250&width=400" class="thickbox"Example 1/aa href="ajaxOverFlow.htm？keepThis=true&TB_iframe=true&height=300&width=500" class="thickbox"Example 2/aa 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=宽度，例如：

a href="ajaxOverFlow.html？height=300&width=300" class="thickbox"Scrolling content/a

下面是一个内容显示的例子：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=UTF-8" /titleThickBox 例子/titlescript type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"/scriptscript type="text/javascript" src="http://jquery.com/demo/thickbox/thickbox-code/thickbox.js"/scriptlink rel="stylesheet" href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" type="text/css" media="screen" //headbodya href="#TB_inline？height=150&width=400&inlineId=myOnPageContent" class="thickbox"测试链接thickbox/adiv id="myOnPageContent" style="display:none;"p测试webjx.com网页教学网/pp测试webjx.com网页教学网/pp测试webjx.com网页教学网/pp测试webjx.com网页教学网/pp测试webjx.com网页教学网/pp测试webjx.com网页教学网/pp测试webjx.com网页教学网/p/div/body/html
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]