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

Javascript
javaScript 数值型和字符串型之间的转换
从父页面读取和操作iframe中内容方法
IE DOM实现存在的部分问题及解决方法
jqPlot Option配置对象详解
jquery JSON的解析方式
JavaScript 捕获窗口关闭事件
xml 封装与解析(javascript和C#中)
JavaScript 设计模式学习 Singleton
JavaScript 设计模式学习 Factory
javascript CSS画图之基础篇
JavaScript 获取事件对象的注意点
JavaScript Konami Code 实现代码
Google Map API更新实现用户自定义标注坐标
JavaScript this 深入理解
javascript EXCEL 操作类代码
window.parent调用父框架时 ie跟火狐不兼容问题
关于取不到由location.href提交而来的上级页面地址的解决办法
JS input 数字验证代码
网页全屏显示代码说明分析
JS 学习笔记 防止发生命名冲突

No. « 149 150 151 152 »

技术文章搜索

关键字

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

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