JQ插件简单图片弹窗查看器
时间：2014-04-06 发布人：SHX 浏览次数：2893 评论：0
thickbox插件
效果演示:http://www.blueidea.com/articleimg/2007/12/5182/tickbox_demo.html
1.使用前需先在<head>中引入3个文件
<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script> /*jquery库*/ <script src="thickbox-compressed.js" type="text/javascript"></script> /*thickbox插件*/ <link rel="stylesheet" href="thickbox.css" type="text/css" /> /*弹出层样式*/
2.相关参数
thickbox插件就是一个<a></a> a标签调用的,所以他的相关参数也就是a标签有关
class="thickbox" 调用特效（必须） //也就是调用插件的a标签的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及可自动关闭；
3.具体的应用可分为以下几种
1> 单个图片
<a href="big.jpg" title="点击小图看大图" class="thickbox"><img src="small.jpg" alt="Single Image" /></a> /*title控制显示的标题显示*/
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>
4.自定义内容
1>更改右上角的关闭按钮文字"close or esc key"
修改thickbox-compressed.js。
查找关键字"or esc key"，将其删除，并将前面的close更改为[x]或"关闭"，然后把文件另存为utf-8格式
2>修改遮罩层透明度
修改thickbox.css。
查找.tb_overlaybg 修改相关数值
3>关闭层：如果我们需要自己添加一个关闭按钮或者图片可以使用：
onclick="self.parent.tb_remove();"
4>thickbox插件默认情况是点击灰色的遮罩层就会关闭取消
把两个$("#tb_overlay").click(tb_remove);去掉就可以取消掉
5. 总结
1>thickbox共有3种关闭弹窗的方式 close按钮 、key（左键点击） 、Esc键 ,可根据自己的需要修改thickbox中对应的代码
2>设置 modal=true时会屏蔽 title栏 此时3种关闭的方式也会清除，关闭方法需自行添加 tb_remove();
上一篇：PS制作下雨的几种做法下一篇：英文单词网页上的翻译插件
