本文主要介绍Jquery弹出层插件ThickBox的使用方法，有需要的朋友可以参考一下。
Thickbox是jQuery的一个插件，功能是弹出对话框和web框架，让用户体验更加愉悦。下面是它的一些用法。
声明：这只是个人简要记录。
准备：你需要三个文件：thickbox.js，thickbox.css，jquery.js，网上都可以下载。
具体用途：
步骤1:将这三个文件引入到您想要使用thickbox的页面。
复制代码如下：
脚本类型=' text/JavaScript ' src=' jquery . js '/script
script type=' text/JavaScript ' src=' thickbox . js '/script
link rel=' style sheet ' href=' thickbox . CSS ' type=' text/CSS '/
步骤2:一般来说，简单的用法就是给标签和Button: class=thickbox添加样式。
也有通过thickbox函数调用的：如tb_init()、TB _ show()；见下文。
几种不同的用法：
1.点击显示图片：
a href=' 001 . jpg ' class=' thickbox ' img src=' 001 . jpg '//a
好，就这样
2.单击按钮或链接：
复制代码如下：
输入alt='#TB_inline？height=300 width=400 inline id=div 1 ' title=' Shawn Liu ' class=' thickbox ' type=' button ' value=' Show '/
a href='#TB_inline？height=155 width=300 inline id=div 2 modal=true ' class=' thickbox '显示隐藏的模式内容。/a
div id=' div 1 ' style=' display:none '
P
这是一个无模式对话框。
/P
/div
div id=' div 2 ' style=' display:none '
P
这是一个模式对话框。
p style=' TEXT-ALIGN:center ' input id=' log in ' onclick=' TB _ remove()' type=' submit ' value=' Ok '//p
/P
/div
解释：在要使用thickbox的A或按钮中添加' #TB_inline '？' Height=300 width=400 '，# TB _ inline是thickbox的固定用法，Height和width是显示弹出对话框的大小参数，inlineId是你要显示的标签或者组件，modal是模式和非模式的选择，当然你也可以接收你定义的很多参数。
3.一般项目中使用较多的页面是加载表单，比如在同一个列表页面上添加和编辑。这时，我们可以用thickbox的形式进行添加和编辑，如下所示：
怎么做？同样，将thickbox样式添加到添加的链接中：
a href='add.shtml？' width=300 height=250 ' class=' thickbox ' New/a
前提是你得把页面做成要显示的样子(add.shtml)，然后指定你要显示的大小。
编辑也一样：先提取原始信息，然后让用户修改：
代码是相同的：
复制代码如下：
a href='edit.shtml？width=300 height=250 NID=item . NID ' class=' thickbox '编辑/a
4.可以自己定位需要使用thickbox的元素。除了使用样式，您还可以使用函数，例如：
复制代码如下：
div id='PicList '
a href=' pic 01 . jpg ' img src=' pic 01s . jpg ' border=' 0 '//a
a href=' pic 02 . jpg ' img src=' pic 01s . jpg ' border=' 0 '//a
/div
$(function() {
TB _ init(' # PicList a[img]')；});
5.对于通过ajax加载的页面，thickbox样式将会失败。解决方案：
只要AJAX加载HTML并将其更新到页面，就执行下面的代码：
tb_init('。thickbox’)；
6.自定义函数调用：
如果您单击缩略图以显示大图，缩略图URL只需在大图URL的后缀前添加s:
复制代码如下：
div id='PicList '
img src='Pic01s.jpg' border='0'/
img src='Pic01s.jpg' border='0'/
/div
$(function() {
$('#PicList img ')。单击(函数(){
tb_show(' '，this.src.substring(0，this.src.length-5)'。jpg '，false)；
});});
此外，如果您想要使用其他事件，您也可以将click更改为您想要触发thickbox的事件。
THICKBOX支持浏览器：
Windows IE 6.0，Windows IE 7，Windows FF 2.0.0.6，Windows Opera 9.0，麦金塔Safari 2.0.4，麦金塔FF 2.0.0.6，麦金塔Opera 9.10.但是根据我的使用，IE6还是有些问题！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。