Jquery插件Thickbox的使用

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

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

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

JS 文件：thickbox.js 或者压缩版本 thickbox-compressed.js。

CSS 文件：ThickBox.css
最后一个 Loading 图片：loadingAnimation.gif

因为Thickbox是基于Jquery的，所以还需要有 jQuery JavaScript 类库；

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

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

[xhtml]
view plaincopy

<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

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

[c-sharp]
view plaincopy

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

弹出框使用方法：

[c-sharp]
view plaincopy

<a href="Default.aspx?keepThis=true&TB_iframe=true&height=400&width=500" title="主页" class="thickbox" </a>
<input onclick="<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 进行更改

[css]
view plaincopy

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

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

[c-sharp]
view plaincopy

onclick="self.parent.tb_remove();"

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

[c-sharp]
view plaincopy

// 刷新打开本窗口的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);去掉就可以取消掉

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