当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS教程:thickbox弹出框效果

Javascript
颜色变换 像字符逐字输入的欢迎词
CSS 伪类实现的鼠标滑动图片链接
百度用到的Js日历 大家可以看看
CSS 渐变背景的6个演示代码
Jquery 弹出层插件实现代码
Javascript 模式实例 观察者模式
[原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
javascript window对象属性整理
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
理解 JavaScript 预解析
理解JavaScript变量作用域更轻松
JavaScript的变量作用域深入理解
javascript写的一个链表实现代码
Js 打字效果 逐一出现的文字
javascript 走马灯效果的链接提示
CSS 动态链接提示
JavaScript 事件的一些重要说明
JavaScript 三种不同位置代码的写法

No. « 266 267 268 269 »

技术文章搜索

关键字

Javascript 中的 JS教程:thickbox弹出框效果

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-13   浏览: 547 ::
收藏到网摘: n/a

Thickbox是jQuery的一个插件plugins；它可以实习弹出框效果；这个效果比浏览器自定义的效果要好的多，并且还可以自定义弹出框里的内容；
开发者：Cody Lindle
Thickbox的官方网址：http://jquery.com/demo/thickbox/
下载：可以在官方网址点击thickbox.js 、thickbox-compressed.js、ThickBox.css 、loadingAnimation.gif链接；其中thickbox-compressed.js是压缩版的JavaScript代码，loadingAnimation.gif为弹出框文件载入时的等待动画；ThickBox.css的css样式文件，thickbox.js是完整代码；

2

下面介绍一下使用方法：

实现需要在head标签里加入下列JavaScript文件；现将jQuery和thickbox下载，然后设置相应路径；

1
2

<script type="text/javascript" src="文件夹路径/jquery.js"></script>
<script type="text/javascript" src="文件夹路径/thickbox.js"></script>

将css文件和loadingAnimation.gif及macFFBgHack.png也上传到你的网站；接下来加入css文件到head标签里

同时要在css里修改 
1

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}

将url(macFFBgHack.png)设置为你的文件路径；

官方Demo

有单个图片、图片展览、内容、iframe和Ajax内容；
1.单张图片是建立一个a标签，给链接a加个class名为thickbox，同时将要显示图片包含在链接里如下：

<a href="images/single.jpg" class="thickbox"><img src="images/single_t.jpg" /></a>

2、图片展览同样建立多个a标签，给链接a加个class名为thickbox，还有给rel设置相同的值，

1
2
3
4

<a href="images/plant1.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a>
<a href="images/plant2.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a>
<a href="images/plant3.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a>
<a href="images/plant4.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>

3、显示内容也要建立一个a标签或者input ，给它加个class名为thickbox，为input标签设置alt=”#TB_inline?height=高度&width=宽度&inlineId=要显示内容id”或a标签设置href=”#TB_inline?height=高度&width=宽度&inlineId=要显示内容id”&modal=true”,其中modal=true为设置另一种关闭模式；默认不设置；接着要给需要显示的内容加上id=”要显示内容id”;id自己设定要与上边链接为同一值；高度、宽度根据实际需要设置如下,可以事先将要显示内容css设置为：display:none;

1
2
3
4

<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" type="button" value="Show" class="thickbox" />
<div id="myOnPageContent">要显示的内容</div>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>
<div id="hiddenModalContent">要显示的内容</div>

4.iframe建立一个a标签，给链接a加个class名为thickbox，a设置标签的href=”要显示的网页地址或者php文件地址?keepThis=true&TB_iframe=true&height=高度&width=宽度”；还有另一种关闭模式：href=”要显示的网页地址或者php文件地址?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=高度&width=宽度&modal=true”

1
2
3

<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" class="thickbox">Example 1</a>
<a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" class="thickbox">Open iFrame Modal</a>

5.Ajax内容建立一个a标签，给链接a加个class名为thickbox，a设置标签的href=”要显示的ajax文件地址?height=高度&width=宽度，例如：

1

<a href="ajaxOverFlow.html?height=300&width=300" class="thickbox">Scrolling content</a>

下面是一个内容显示的例子：


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]