JS教程:thickbox弹出框效果
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是完整代码; 下面介绍一下使用方法:实现需要在head标签里加入下列JavaScript文件;现将jQuery和thickbox下载,然后设置相应路径;
将css文件和loadingAnimation.gif及macFFBgHack.png也上传到你的网站;接下来加入css文件到head标签里 同时要在css里修改
将url(macFFBgHack.png)设置为你的文件路径; 官方Demo有单个图片、图片展览、内容、iframe和Ajax内容; <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 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |