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

Javascript
提高网站信任度的技巧
javascript脚本编程解决考试分数统计问题
图片上传之前检查大小、尺寸、格式并预览的js代码
JavaScript打开客户端exe文件的代码
JavaScript confirm选择判断
javascript title闪动效果
javascript把15位身份证转成18的函数
新人报道，发个小技巧(js数组重复判断)
Javascript this关键字使用分析
javascript TextArea动态显示剩余字符
JavaScript Undefined，Null类型和NaN值区别
javascript Select标记中options操作方法集合
javascript trim 去空格函数实现代码
javascript网页关闭时提醒效果脚本
checkbox 多选框 联动实现代码
收集的比较全的automation服务器不能创建对象 异常原因和解决方法
Javascript客户端将指定区域导出到Word、Excel的代码
IE浏览器兼容Firefox的JS脚本的代码
在html页面中包含共享页面的方法
javascript replace()用法详解附实例代码

No. « 113 114 115 116 »

技术文章搜索

关键字

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

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