官方网址: http://jquery.com/demo/thickbox/ Download thickbox.js or thickbox-compressed.js, ThickBox.css,
一.使用前需先在<head>中引入3个文件
<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script> /*jquery库*/
<script src="thickbox-compressed.js" type="text/java可script"></script> /*thickbox插件*/
<link rel="stylesheet" href="thickbox.css" type="text/css" /> /*弹出层样式*/
二.相关参数
class="thickbox" 调用特效(必须)
height 打开页面的高度;
width 打开页面的宽度;
title="Iframe(Auto Hide)" title的内容;
keepThis=true
TB_iframe=true 设置后iframe中的thickbox还有效果 (适用于thickbox嵌套)
#TB_inline 调用当前页面的层;
inlineId 当前页面层的ID;
modal=true 表示禁用title,去掉即可显示title及可自动关闭;
三.具体的应用可分为以下几种
1> 单个图片
<a href="big.jpg" title="点击小图看大图" class="thickbox"> /*title控制显示的标题显示*/
<img src="small.jpg" alt="Single Image" />
</a>
2>一组图片 (设置一组相同的rel属性) //用 jquery-1.1.3.1.pack.js 时有效,更高级别的JQ库只会出现全屏黑
<a href="1.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="1_t.jpg" alt="Plant 1" /></a>
<a href="2.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="2_t.jpg" alt="Plant 2" /></a>
<a href="3.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="3_t.jpg" alt="Plant 3" /></a>
<a href="4.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="4_t.jpg" alt="Plant 4" /></a>
3>内嵌内容 /*可设定弹出层的高度、宽度、inlineId 控制显示的内容、modal控制是否显示标题栏*/
点击按钮显示(属性加在alt中)
<input type="button" alt="#TB_inline?height=200&width=300&inlineId=test" title="按钮" value="显示" class="thickbox" />
点击链接显示(属性加在href中)
<a href="#TB_inline?height=200&width=300&inlineId=hiddenModalContent&modal=true" title="链接" class="thickbox">显示</a>
<div id="test" style="display:none">这里是隐藏的内容</div>
4>iFramed内容
<a href="boxs.html?keepThis=true&TB_iframe=true&height=100&width=220&modal=true" title="显示IF" class="thickbox">显示</a>
5>Ajax内容
<a href="box.html?height=350&width=350&modal=true" title="Ajax载入,页面无法查看源代码" class="thickbox">Example</a>
把两个$("#tb_overlay").click(tb_remove);去掉就可以取消掉
5>
------------------------------------------------------------------------
五. 总结
1>thickbox共有3种关闭弹窗的方式 close按钮 、key(左键点击) 、Esc键 ,可根据自己的需要修改thickbox中对应的代码
2>设置 modal=true时会屏蔽 title栏 此时3种关闭的方式也会清除,关闭方法需自行添加 tb_remove()