基于jQuery弹出层插件thickbox
作者：佳明妈 来源：未知 2010-11-04 人气：基于jQuery弹出层插件thickbox，这是thickbox3.1版，需要jQuery支持，可以使用jquery-1.4.3.min.js这个文件比较新比较小。
基于jQuery弹出层插件thickbox，这是thickbox3.1版，需要jQuery支持，可以使用jquery-1.4.3.min.js这个文件比较新比较小。
随着时间的推移，jquery已经更新了很多个版本了，请选择合适的jquery版本使用
thickbox3.1参数中文说明：
class="thickbox" 调用thickbox height 打开窗口的高度； width 打开窗口的宽度； title="Iframe(Auto Hide)" 弹窗的标题（title） keepThis=true TB_iframe=true 这两个参数调用iframe页面时必须的 #TB_inline 调用当前页面上隐藏的层； inlineId 当前页面隐藏的层的ID； modal=true 显示或禁用title
1、调用iframe框架，固定宽度和高度，超出显示滚动条(auto hide):
<a href="http://www.51xuediannao.com?keepThis=true&TB_iframe=true&height=400&width=600" class="thickbox">
调用iframe，固定宽度和高度，超出显示滚动条
</a>
2、打开页面，固定宽度和高度，无滚动条，禁用title, fixed width, fixed height
<a href="thickbox.html?keepThis=true&TB_iframe=true&height=100&width=220&modal=true" class="thickbox">
modal=true表示禁用title，去掉即可显示title及可自动关闭
</a>
3、thickbox点击链接显示隐藏的层，隐藏在页面中已经存在
<a href="#TB_inline?height=200&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">thickbox链接显示隐藏的层，隐藏在页面中已经存在</a>
隐藏的层如下，注意id和链接中的id对应，注意层中的代码 onclick="tb_remove()" 可以移除当前层
<div id="hiddenModalContent" style="display:none">
<p>thickbox链接显示隐藏的层</p>
<p style="text-align:center"><input type="submit" value="按钮" onclick="tb_remove()"/></p>
</div>
4、点击按钮显示隐藏的层，隐藏在页面中已经存在
<input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent " title="点击按钮显示隐藏的层，隐藏在页面中已经存在" class="thickbox" type="button" value="show" />
<div id="myOnPageContent" style="display:none">
<p>点击按钮显示隐藏的层这是隐藏的层</p>
</div>
5、thickbox3.1的ajax载入，自动宽度和高度，禁用title
<a href="thickbox.html?height=350&width=350&modal=true" class="thickbox">
thickbox3.1的ajax载入，页面无法查看源代码
</a>
6、thickbox调用单张图片
<a href="images/plant1.jpg" title="plant" class="thickbox"><img src="images/plant1_t.jpg" alt="thickbox调用单张图片" /></a>
7、多张图片调用
<a href="images/plant1.jpg" title="plant1" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="多张图片调用第一张1" /></a>
<a href="images/plant2.jpg" title="plant2" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="2" /></a>
<a href="images/plant3.jpg" title="plant3" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="多张图片调用第一张3" /></a>
↓ 查看全文
基于jQuery弹出层插件thickbox由懒人建站收集整理，您可以自由传播，请主动带上本文链接
懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
- 上一篇：仿wordpress 3D旋转标签云JS代码
- 下一篇：向上滚动的文字特效JS代码
基于jQuery弹出层插件thickbox-最新评论