jQuery插件ThickBox实现javascript弹出框

ThickBox是一个非常精简的基于jQuery的弹出框插件，不需要书写javascript代码就可以实现任意内容的弹出框效果，弹出框内容可以是图片，图片库，HTML，IFramed或远程ajax内容，效果图如下：
jQuery插件ThickBox实现javascript弹出框

ThickBox插件简单在线实例

ThickBox官方文档说明
http://jquery.com/demo/thickbox/

支持浏览器情况
Windows IE 6.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+

使用说明
需要使用jQuery库文件和ThickBox库文件
http://jquery.com/

需要使用thickbox.css文件和动态加载提示图片loadingAnimation.gif

使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery1.3.1.pack.js"></script>
  2. <script type="text/javascript" src="thickbox.js"></script>
  3. <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

包含jQuery1.3.1文件和thickbox文件，同时需要使用thickbox.css文件，用于控制弹出框的样式和效果

二，HTML部分

  1. <a href="biuuu.jpg" title="" class="thickbox" ><img src="biuuu_thumb.jpg" alt="图片"/></a>

这样就实现了一张图片的弹出展示功能，只需要指定图片的class为thickbox，同时注意有一个小图和一张大图，如果需要展示图片库，方法如下：

  1. <a href="biuuu_1.jpg" title="" class="thickbox" rel="biuuu_pictures"><img src="biuuu_1_thumb.jpg" alt="图片"/></a>
  2. <a href="biuuu_2.jpg" title="" class="thickbox" rel="biuuu_pictures" ><img src="biuuu_2_thumb.jpg" alt="图片"/></a>
  3. <a href="biuuu_3.jpg" title="" class="thickbox" rel="biuuu_pictures" ><img src="biuuu_3_thumb.jpg" alt="图片"/></a>
  4. <a href="biuuu_4.jpg" title="" class="thickbox" rel="biuuu_pictures" ><img src="biuuu_4_thumb.jpg" alt="图片"/></a>

如果需要实现图片库的效果，只需要给每个图片增加一个rel属性，如上： rel="biuuu_pictures"，这样就会有上一张和下一张的按钮。

其它HTML，IFramed或远程ajax内容弹出框使用方法与图片一样，只不过链接的元素不同，分别如下：

弹出HTML元素内容

  1. ?height=300&width=300&inlineId=myOnPageContent

弹出IFramed内容

  1. ?KeepThis=true&TB_iframe=true&height=400&width=600

弹出ajax内容

  1. ?height=300&width=300

需要指定元素的高度与宽度，并指定相应的弹出元素。

通过测试实验中发现，推荐在jQuery1.3.1的版本使用ThickBox插件。ThickBox使用非常简单，主要是不需要书写javascript代码，在使用中要注意动态加载提示图片的路径，默认路径如下：

  1. var tb_pathToImage = "images/loadingAnimation.gif";

如上路径可跟椐实际情进行修改，在ThickBox.js文件中。

ThickBox插件内部调用代码如下：

  1. $(document).ready(function(){
  2. tb_init('a.thickbox, area.thickbox, input.thickbox');
  3. imgLoader = new Image();
  4. imgLoader.src = tb_pathToImage;
  5. });

ThickBox插件有jQuery官方的支持，因此使用维护比较稳定，可用性强，非常值得推荐。

ThickBox官方文档说明
http://jquery.com/demo/thickbox/