Jquery插件Thickbox的使用

最近项目需要用到弹出层！最后找到Thickbox，它能在浏览器界面上显示非常棒的弹出框，可以显示单图片，多图片，AJAX 请求内容或链接内容。感觉挺不错的！Thickbox的官方网址：http://jquery.com/demo/thickbox/

以下是搜集到的一些使用方法：

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

1. JS 文件：thickbox.js 或者压缩版本 thickbox-compressed.js。
2. CSS 文件：ThickBox.css
3. 最后一个 Loading 图片：loadingAnimation.gif
   因为Thickbox是基于Jquery的，所以还需要有 jQuery JavaScript 类库；

需要的东西可以去我的资源下载！

首先在 HTML 文件的 head中导入jquery.js 和thickbox.js文件，导入 thickbox.css 文件;并且jquery.js 文件放在前面：

[xhtml] view plaincopy

1.     <script src="../Scripts/jquery-latest.pack.js" mce_src="Scripts/jquery-latest.pack.js" type="text/javascript"></script>  
2.     <script src="../Scripts/thickbox.js" mce_src="Scripts/thickbox.js" type="text/javascript"></script>  
3. <link href="../Styles/thickbox.css" mce_href="Styles/thickbox.css" rel="stylesheet" type="text/css" />  

 最后你只要给元素添加 class=”thickbox” 属性就可以开始用 thickbox

实现了一张图片的弹出展示功能：

[c-sharp] view plaincopy

1. <a href="”bg.jpg”" mce_href="”bg.jpg”" class=”thickbox” ><img src="”bg.jpg”" mce_src="”bg.jpg”" alt=”图片”/></a>  
2. //只需要指定图片的class为thickbox  

弹出框使用方法：

[c-sharp] view plaincopy

1. <a href="Default.aspx?keepThis=true&TB_iframe=true&height=400&width=500" title="主页" class="thickbox" </a>  
2. <input οnclick="<web.path:path/>/bannedUserList!unBannedUserList?height=400&width=800&inlineId=myOnPageContent" title="弹出层" class="thickbox" type="button" value="Ban Another" />  
3. //内嵌内容  
4. <input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="标题" class="thickbox" type="button" value="Show" />    
5. <a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">显示隐藏内容a>  
6. //遮罩层  
7. URL后面加?KeepThis=true&TB_iframe=true&height=400&width=600  
8. 参数字符串中加 modal=true  
9. ?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true  
10. 这样当关闭ThickBox时会调用ThickBox iframe (self.parent.tb_remove())内部的一个tb_remove()函数  
11. 所有其他参数字符都必须在TB_iframe 参数之前。URL中所有"TB" 之后的将被移除。  
12. <a href="index.html?keepThis=true&TB_iframe=true&height=250&width=400" title="标题" class="thickbox">打开一个页面</a>    
13. <a href="index.html?keepThis=true&TB_iframe=true&height=300&width=500" title="标题" class="thickbox">打开一个页面</a>  
14. <a href="index.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="标题" class="thickbox">打开一个页面</a>  

 

在使用过程中我们会发现所弹出窗口(div)右上角的关闭按钮为显示为"close or esc key"，而不是中文的; 如果想把它变成[X]或"关闭"应该怎么来办呢？ 

    将thickbox.js文件打开，查找关键字"or esc key"，将其删除，并将前面的close更改为[X]或"关闭"，然后把文件另存为UTF-8格式，如果不保存为UTF-8的话，将会出现乱码。

 

thickbox 弹出层的遮住层透明度修改：

打开thickbox.css查找.TB_overlayBG 进行更改

[css] view plaincopy

1. .TB_overlayBG {  
2.  background-color:#000;  
3.  filter:alpha(opacity=75);  
4.  -moz-opacity: 0.75;  
5.  opacity: 0.75;  
6. }  

 

关闭层：如果我们需要自己添加一个关闭按钮或者图片可以使用：

[c-sharp] view plaincopy

1. οnclick="self.parent.tb_remove();"  

关闭层刷新父页面,修改关闭方法 ：

 

[c-sharp] view plaincopy

1. // 刷新打开本窗口的opener窗口.   
2. function refreshOpener(){   
3. // 可能存在frame页面,所以要引用top窗口  
4.    
5.     var win = top.window;   
6.     try  
7.     {   
8.         // 刷新.   
9.         if(win)   
10.         {   
11.            win.location.reload();   
12.         }  
13.     }  
14.     catch(ex)  
15.     {   
16.         // 防止opener被关闭时代码异常。   
17.     }   
18. }   
19. // 刷新opener窗口后关闭自己。   
20. function refreshOpenerAndCloseMe(){   
21.  tb_remove();  
22.  refreshOpener();  

这样子修改在点击关闭的时候就会刷新父页面，但是取消也会刷新，用户体验不好

我们可以自己写一个关闭方法来调用！复制没有添加刷新的tb_remove()方法改一个名字！自己调用就OK了。

 

thickbox插件默认情况是点击灰色的遮罩层就会关闭

把两个$("#TB_overlay").click(tb_remove);去掉就可以取消掉

转载自：http://blog.csdn.net/intcry/article/details/6035639