最近的项目中比较多使用的 ThickBox,今天就简单介绍下,ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容。
要使用 ThickBox,需要下载三个文件:
- JS 文件:thickbox.js 或者压缩版本 thickbox-compressed.js。
- CSS 文件:ThickBox.css
- 最后一个 Loading 图片:loadingAnimation.gif
除了以上三个文件之外,你还需要有 jQuery JavaScript 类库 或者压缩版,甚至可以使用 Google 提供 CDN 加速的版本。
ThickBox 使用也非常见,首先在 HTML 文件的 HEAD 导入 jQuery JS 和 ThickBox JS 文件,并且 jQuery JS 文件必须在前:
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
然后打开 thinkbox.js 文件通过 tb_pathToImage 这个变量来设置 loadingAnimation.gif 文件的路径。
然后在 HEAD 导入 thickbox.css 文件:
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
当然你也可以吧 thickbox.css 里面的内容复制到你现在的 CSS 文件中,最后你只要给 a 元素天添加 class=”thickbox” 属性就可以开始用 thickbox。详细使用可以查看 ThickBox 官方教程。
我在使用中碰到的最大问题是,如果网页上有 Flash 的话,往往 Flash 会把 ThickBox 的弹出框给挡住,这时的解决方法也是非常简单,就是给 Flash 设置透明的参数:wmode=”transparent”。详细就是给 Flash 的 object 标签添加如下参数:<param name="wmode" value="transparent">
,并在 embed 标签中设置 wmode=”transparent”,如果使用 AC_FL_RunContent,可以加多一对参数 ‘wmode’,'transparent’ 即可。如果还是有问题,可以尝试给 Flash 外面增加一个 DIV 标签,并给他设置 z-index:0;
的样式。
二,问题 关于thinkbox后面的宽度 高度失效的问题
/cpdm/content.php#TB_inline?height=170&width=290&inlineId=hiddenModalContent&modal=true&id=9
链接地址中的参数要跟在TB_inline的后面,如果是?传值的话,如果是pass/0则可以直接写在url的后面,
关于在ajax中新增的class='thickbox' 点击显示不出弹出层的原因
js的文档加载时在页面加载完成后生效的,新加入的属性不起作用,可以通过
tb_init('a.thickbox, area.thickbox, input.thickbox');来重新加载thickbox
分享到:
相关推荐
ThickBox3.1弹出层ThickBox3.1弹出层ThickBox3.1弹出层ThickBox3.1弹出层ThickBox3.1弹出层
ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等演示页面
基于jQuery弹出层插件thickbox 智能提示
jQuery Thickbox3.1 弹出层插件
jquery 弹出层插件 ThickBox 多功能弹出层插件支持... jquery 弹出层插件 ThickBox 多功能弹出层插件支持... jquery 弹出层插件 ThickBox 多功能弹出层插件支持...
JQUERY插件THICKBOX的功能很强大,但是它的基本使用却很简单容易.但是要研究的更深,运用得更加灵活的话,还是有点难度,根据其官方站点介绍
js弹出层之JQUERY THICKBOX弹出层插件
用Thickbox弹出层时,提交弹出层里边的数据,后台方法有时候能进去,有时候不进去的解决方法!
thickbox是一个非常好的弹出层插件,而且使用起来好方便。
Thickbox 基于jQuery的弹出层(盒子)插件.zip
js弹出框弹出层 含交互 thickbox 获取返回值,我自己加了一个例子,里面包含获取弹出层的返回值的示列,希望对大家有用
基于jQuery弹出层插件thickbox
jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等
弹出层 thickbox colorbox facebox jqueryalert shadowbox,很多,可以看着用
内容索引:脚本资源,jQuery,thickbox,弹出层,jQuery插件 Thickbox 基于jQuery的弹出层操作插件,这里所说的层是太专业,因为现在的DIV网页,基于元素都是在层里面,而且本插件所弹出的层各式各样,比如登录框、无...
主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下
jquery,一个web弹出层样式表,跟thickbox.js文件对应使用