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;
的样式。
实例:
TINY.box.show('advanced.html',1,300,150,1,3)
它一共有6个参数,第一个是要显示的 AJAX 或 HTML 内容。第二个是设置是否为 AJAX。第三个是宽度,0 为自动。第四个是高度,0
为自动。第五个是是否设置隐藏,第六个则是设置是否自动隐藏的时间。
演示
+ 下载
请注意下面的顺序:
正确:
<a id="forgot" href="#">Forgot your password?</a>
<script type="text/javascript">
T$('forgot').onclick = function(){ TINY.box.show('advanced.html',1,300,150,1)}
</script>
错误:
<script type="text/javascript">
T$('forgot').onclick = function(){ TINY.box.show('advanced.html',1,300,150,1)}
</script>
<a id="forgot" href="#">Forgot your password?</a>
分享到:
相关推荐
tinybox JavaScript弹出框插件类,国外的一款插件,完成的功能是在网页上弹出一个层,层内的内容可由您自己定制,可以是一张远程加载的图片,也可以是一段文字,也可以是一个网页,Ajax载入功能,显示载入动画,完成...
原生js tinybox.js弹出层插件支持ajax弹出层放大缩小 原生js tinybox.js弹出层插件支持ajax弹出层放大缩小 原生js tinybox.js弹出层插件支持ajax弹出层放大缩小
tinybox.js 无刷新弹出窗口,带AJAX动态加载, 把渐变的调快了,这样运行快些。
摘要:脚本资源,jQuery,tinybox,lightbox,高亮弹出框 JS网页高亮框插件,一个使用jquery实现的高亮弹出框插件tinybox,可以实现文字、图片、普通html内容的高亮弹出显示,可以设置弹出框自动关闭时间,可以通过ajax...
Tinybox popup loading content is an Ajax widgets
tinybox是一个Ajax弹出加载内容的小插件,本示例代码将演示它的调用使用方法 演示源码。...如图所示为tinybox弹出图片框的效果。 本效果插件所弹出的浮动窗口,鼠标在页面的任意处单击,即会关闭弹出框。
tinybox demo
TinyBox
Jquery实现一个类似弹出起泡窗的功能,可显示提示框,图片框等等
vue-tinybox Vue.js Slick的一个精巧却很小的灯箱画廊。 没有过多的设计。 图片,缩略图,控件。 微小的。 无依赖关系。 少于vue-tinybox一个Vue.js Slick的光滑但很小的灯箱画廊。 没有过多的设计。 图片,缩略图,...
TinyBox-studios.github.io
Tiny Box
2012.7.3 部分小页面,使用弹出层浏览(tinybox) 2012.7.2 活动编辑时选择作品类型时刷新页面导致编辑器内容丢失修正;等级图标更换为叶子、花、果实; 教师平台和管理员平台菜单头加分隔线(images中的hr.gif) ...
dform.js一个用于处理表单的jQuery插件要求bload 支持的模式Tinybox 2 引导程序jQuery UI Fancybox 2选项快来了用法快来了
领养树木 一个学习如何照顾附近小树的应用程序。 使用的技术 谷歌地图 API 谷歌融合表 引导程序 2.X 小盒子 GitHub 页面 服务器 上的服务器收集用户的订阅并更新 Google Fusion Tables。
│ │ tinybox.js │ │ │ ├─bootstrap │ │ │ │ │ ├─css │ │ │ bootstrap-responsive.css │ │ │ bootstrap-responsive.min.css │ │ │ bootstrap.css │ │ │ bootstrap.min.css │ │ │ │ ...