Jquery插件——thickbox分享

来源：互联网发布：阿里云控制台 html 编辑：程序博客网时间：2024/05/30 04:47

实现弹出子页面覆盖父页面，同时使父页面灰掉不可编辑

步骤：
1、首先在<head>标签内导入两个js文件和一个css文件
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.min.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/thickbox.js"></script>
<link type="text/css" rel="Stylesheet" href="Style/thickbox.css" />
这两个js和css都可以从官网上DownLoad下来。
2、在你要使用的地方加上class=“thickbox”属性，url后面加上？keepThis=true&TB_iframe=true即可。
如：<a href="test.aspx?keepThis=true&TB_iframe=true&height=400&width=500" class="thickbox">打开</a>
特别说明一下，如果弹出的页面想要是模态的，再加上&modal=true这个参数

一些自定义配置：
1、弹出窗口(div)右上角的关闭按钮为显示为"close or esc key"，而不是中文的; 如果想把它变成[X]或"关闭"应该怎么来办呢？
将thickbox.js文件打开，查找关键字"or esc key"，将其删除，并将前面的close更改为[X]或"关闭"，然后把文件另存为UTF-8格式，如果不保存为UTF-8的话，将会出现乱码。
2、 thickbox 弹出层的遮住层透明度修改
打开thickbox.css查找.TB_overlayBG 进行更改
.TB_overlayBG{
Background-color:#000;
Filter:alpha(opacity=75);
-moz-opacity:0.75;
Opacity:0.75;
}
3、关闭层：如果我们需要自己添加一个关闭按钮或者图片可以使用
onclick="self.parent.tb_remove();"
4、关闭层刷新父页面,修改关闭方法
Function tb_remove()
{
$("#TB_imageOff").unbind("click");
$("#TB_closeWindowButton").unbind("click");
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
$("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
$("body","html").css({height: "auto", width: "auto"});
$("html").css("overflow","");
}
document.onkeydown = "";
document.onkeyup = "";
document.getElementById('btn1').click();//刷新
return false;
}

0 0