知识 分享 互助 懒人建站

懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

懒人建站提供网页素材下载、网站模板
知识 分享 互助!

基于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由懒人建站收集整理,您可以自由传播,请主动带上本文链接

懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

基于jQuery弹出层插件thickbox-最新评论