Thickbox3.1 插件使用方法

最新推荐文章于 2024-06-09 20:17:27 发布

weixin_34198797

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量235

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/d5100/archive/2011/08/25/2153023.html

版权

一.使用前需先在<head>中引入3个文件

二.相关参数

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控制显示的标题显示*/

</a>

2>一组图片 (设置一组相同的rel属性) //用 jquery-1.1.3.1.pack.js 时有效，更高级别的JQ库只会出现全屏黑

3>内嵌内容 /*可设定弹出层的高度、宽度、inlineId 控制显示的内容、modal控制是否显示标题栏*/

点击按钮显示（属性加在alt中）

点击链接显示（属性加在href中）

<div id="test" style="display:none">这里是隐藏的内容</div>

4>iFramed内容

5>Ajax内容

<a href="box.html?height=350&width=350&modal=true" title="Ajax载入，页面无法查看源代码" class="thickbox">Example</a>

---------------------------------------------------------------------------------------------------------------------------

四.自定义内容

1>更改右上角的关闭按钮文字"close or esc key"

修改 thickbox-compressed.js。

查找关键字 "or esc key" ，将其删除，并将前面的close更改为[x]或 "关闭" ，然后把文件另存为utf- 8 格式

2>修改遮罩层透明度

修改thickbox.css。

查找.tb_overlaybg 修改相关数值

3>关闭层：如果我们需要自己添加一个关闭按钮或者图片可以使用：

οnclick= "self.parent.tb_remove();"

4>thickbox插件默认情况是点击灰色的遮罩层就会关闭取消

把两个$("#tb_overlay").click(tb_remove);去掉就可以取消掉

------------------------------------------------------------------------

五. 总结

1>thickbox共有3种关闭弹窗的方式 close按钮、key（左键点击）、Esc键 ,可根据自己的需要修改thickbox中对应的代码

2>设置 modal=true时会屏蔽 title栏此时3种关闭的方式也会清除，关闭方法需自行添加 tb_remove()

转载于:https://www.cnblogs.com/d5100/archive/2011/08/25/2153023.html

关注