jQuery插件ThickBox

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

需要使用thickbox.css文件和动态加载提示图片loadingAnimation.gif
在使用中要注意动态加载提示图片的路径,默认路径: images/loadingAnimation.gif

<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/thickbox.js"></script>

<a href="images/image2.jpg?height=500&width=400" title="mtTitle" class="thickbox"><img src="images/thumb_image2.jpg" alt="Single Image"/></a>
这样就实现了一张图片的弹出展示功能,只需要指定图片的class为thickbox,同时注意有一个小图和一张大图,如果需要展示图片库,方法如下:
<a href="biuuu_1.jpg" title="" class="thickbox" rel="biuuu_pictures"><img src="biuuu_1_thumb.jpg" alt="图片"/></a>
<a href="biuuu_2.jpg" title="" class="thickbox" rel="biuuu_pictures" ><img src="biuuu_2_thumb.jpg" alt="图片"/></a>
<a href="biuuu_3.jpg" title="" class="thickbox" rel="biuuu_pictures" ><img src="biuuu_3_thumb.jpg" alt="图片"/></a>
如果需要实现图片库的效果,只需要给每个图片增加一个rel属性,如上: rel="biuuu_pictures",这样就会有上一张和下一张的按钮。

其它HTML,IFramed或远程ajax内容弹出框使用方法与图片一样,只不过链接的元素不同,分别如下:
弹出HTML元素内容:path?height=300&width=300&inlineId=myOnPageContent
弹出IFramed内容:path?KeepThis=true&TB_iframe=true&height=400&width=600
弹出ajax内容:path?height=300&width=300
需要指定元素的高度与宽度,并指定相应的弹出元素。


显示隐藏DIV是href="#TB_inline?height=155& amp;width=300& inlineId=hiddenModalContent&modal=true"加了 modal=true时,你需要在DIV中自己手写一个关闭按钮,如<a href="#" onclick="tb_remove()">关闭</a>这样

其中的 inlineId=hiddenModalContent这一段是隐藏DIV的ID,另两个参数一个高一个宽就不用说了

IFRAME是<a href="Upimg/ajaxOverFlow.html? keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">例子2</a>

你可能感兴趣的:(html,jquery,Ajax,css)