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

Javascript
用户注册常用javascript代码
JavaScript 事件监听实例代码[兼容IE,firefox] 含注释
javascript appendChild,innerHTML,join性能比较代码
JavaScript 继承详解 第一篇
javascript 控制 html元素 显示/隐藏实现代码
Javascript 判断函数类型完美解决方案
获取URL地址中的文件名和参数的javascript代码
js 获取浏览器高度和宽度值(多浏览器)
FF IE兼容性的修改小结
JS URL传中文参数引发的乱码问题
javascript 24小时弹出一次的代码(利用cookies)
ie focus bug 解决方法
javascript concat数组累加 示例
javascript 触发事件列表 比较不错
当文本框的值发生改变时，触发事件，在IE中有效
javascript 操作table的特性
jquery判断单个复选框是否被选中的代码
关于javascript中的parseInt使用技巧
JavaScript 密码强度判断代码
js跨域和ajax 跨域问题的实现思路

No. « 155 156 157 158 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-13   浏览: 519 ::
收藏到网摘: 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 全部选择 提示：你可先修改部分代码，再按运行]