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 文件放在前面：

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

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

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

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

弹出框使用方法：

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

.TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }

 

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

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

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

 // 刷新打开本窗口的opener窗口. function refreshOpener(){ // 可能存在frame页面,所以要引用top窗口 var win = top.window; try { // 刷新. if(win) { win.location.reload(); } } catch(ex) { // 防止opener被关闭时代码异常。 } } // 刷新opener窗口后关闭自己。 function refreshOpenerAndCloseMe(){ tb_remove(); refreshOpener();

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

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

 

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

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