1,首先下载thickbox的脚本文件http://jquery.com/demo/thickbox/thickbox-code/thickbox.js,thickbox的css样式表http://jquery.com/demo/thickbox/thickbox-code/thickbox.css还有一个加载中图片,http://jquery.com/demo/thickbox/p_w_picpaths/loadingAnimation.gif,把这几个文件布置到项目相应位置并在需要的页面使用,需要注意一点就是那个图片的位置,到thickbox.js里面
- var tb_pathToImage = "p_w_picpath/loadingAnimation.gif";
这里指出了图片位置,如果位置不一样,自己改。
2,在弹出窗中加载指定页面,thickbox有个非常重要的函数需要的时候直接调用,
- function tb_show(caption, url, p_w_picpathGroup)
caption为弹窗标题,url为弹窗要加载的url,后面的是要显示的图片组,标题可为空,如果不显示图片组的话可以p_w_picpathGroup为false,url后面还可以加thickbox本身的参数,和普通的url参数一样,例如width=450&height=450来设置弹窗的宽和高,例如:我们要加载百度,并设置弹窗高450,宽450,
- tb_show("","www.baidu.com?width=450&height=450", false)
还有其他参数例如关闭模式,默认的弹窗是带关闭(close)的,或单击页面其他位置关闭,如果要设置其他模式,例如不能手动关闭的弹窗除非刷新本页面或者重定向,这是继续在url后面加参数modal=true,
- tb_show("","www.baidu.com?width=450&height=450&modal=true", false)
3,要在thickbox里面现实本页面某部分内容,可以这样子,
- tb_show("","#TB_inline?height=67&width=187&inlineId=post&modal=true",false);
这里url里面的#TB_inline?是固定的格式后面的是参数,其中后面的inlineId参数是必须的,因为他指出要显示的部分的id值,这里的post是我页面里面div的id,所以显示的就是div里面的内容,其他参数同上。当然如果要显示图片就不用说了吧,直接在div里面包含img就可以了。
转载于:https://blog.51cto.com/movedo/463248