轻量级的 JavaScript 弹出框脚本：TinyBox

ThickBox 是一个基于 JQuery 类库的扩展，它能在浏览器界面上显示非常棒的弹出框，它可以显示单图片，多图片，AJAX 请求内容或链接内容。

要使用 ThickBox，需要下载三个文件：

1. JS 文件：thickbox.js 或者压缩版本 thickbox-compressed.js。
2. CSS 文件：ThickBox.css
3. 最后一个 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>