快速业务通道

JS教程:thickbox弹出框效果

作者 佚名技术 来源 网页制作 浏览 发布时间 2012-03-07

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设置相同的值,

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自己设定要与上边链接为同一值

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号