如何使用Jquery弹出层插件ThickBox

Thickbox是jQuery的一个插件，它的功能是弹出对话框和网页框，让用户体验更加愉悦。这里简单介绍一下它的用法。郑重声明：这只是个人的简要记录。准备：你需要三个文件：thickbox.js，thickbox.css，jquery.js，可以在网上到处下载

具体用途：

第一步：将这三个文件介绍到您想要使用thickbox的页面

复制代码的代码如下： script type=' text/JAVAScript ' src=' http 3360 jquery . js '/script script type=' text/JAVAScript ' src=' http : thickbox . js '/script link rel='样式表' href=' thickbox.css' type=' text/。

第二步：一般简单的使用就是给A标签和Button添加样式：class=thickbox并通过thickbox函数调用：比如tb_init()、TB _ show()；见下文。

几种不同的用途：

1.单击以显示图片：

a href=' 001 . jpg ' class=' thick box ' img src=' http 3360001 . jpg '/aok，就是这样。2.单击按钮或链接：

复制代码如下：input alt='#TB_inline？height=300 width=400 inlineid=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=' thick box '显示隐藏的模式内容。/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

说明：添加' #TB_inline？到要使用thickbox的或按钮。Height=300 width=400 '，# TB _ inline是thickbox的固定用法，Height和width是显示弹出对话框的大小参数，inlineId是你想要显示的标签或者组件，modal是模式和非模式的选择，当然你也可以拾取很多用户自定义的参数。3.一般在项目中更多的是使用它来加载表单页面，比如在同一个列表页面上进行添加和编辑，那么我们就可以了

怎么做？同样，添加粗框样式以添加链接：

a href='add.shtml？width=300 height=250 ' class=' thick box ' add/a前提是您必须使页面显示(add.shtml)，然后指定要显示的大小。编辑也是一样：先提取原始信息，然后让用户修改：

代码是一样的：

复制代码如下：a href='edit.shtml？宽度=300高度=250 NID=item . NID ' class=' thickbox '编辑/a

4.您可以自己定位需要使用thickbox的元素。除了使用样式，您还可以使用函数，例如：

复制代码的代码如下： div id=' piclist ' a href=' pic 01 . jpg ' img src=' http 3360 pic 01s . jpg ' border=' 0 '/aa href=' pic 02 . jpg ' img src=' http 3360 pic 01s . jpg ' border=' 0 '

$(function(){ TB _ init(' # PicList a[img]')；});

5.对于ajax加载的页面，thickbox样式将失败。解决方案：只需在AJAX加载HTML并将其更新到页面后执行以下代码：

tb_init('。thick box’)；6.自定义函数调用：点击缩略图，显示大图，缩略图URL只在大图URL后缀前加s:

复制的代码如下： div ID=' piclist ' img src=' http 3360 pic 01s . jpg '边框=' 0 '/img src=' http 3360 pic 01s . jpg '边框=' 0 '/div

$(function() {$('#PicList img '))。单击(function() {tb_show('，this.src.substring(0，this.src.length-5)"。' jpg '，false)；});});

此外，如果您想使用其他事件，也可以将click更改为您想要触发thickbox的事件。

THICKBOX支持浏览器： Windows IE6.0、Windows IE 7、Windows FF 2.0.0.6、Windows Opera 9.0、Macintosh Safari 2.0.4、Macintosh FF 2.0.0.6、Macintosh Opera 9.10.但是根据我的使用情况来看，IE 6还是有些问题的！