自己写遮盖的心得
近来项目中为了使用Ajax技术，需要一个友好的遮盖层效果的等待画面，本人比较懒，没有使用一些ajax框架，自己动手写了一个遮盖层。
其中遇到几个比较难搞定的问题：
1、select这个优先级比较高的页面控件
2、兼容Mozilla
3、消息框的自动居中（起码看起来比较舒服）
从网络上搜索了一堆解决办法，比较适用的有：
1、使用比select优先级更高的遮住他（还有一种是将它隐藏，不喜欢），我只用Iframe，效果不错！
2、兼容Mozilla主要是支持Mozilla的css样式（网上搜）
3、从网上摘抄了一段css代码（呵呵）
这样主要的问题解决了。
我的所有样式都写在了js中，这样免去了每个页面的导入css文件和创建占位的div。样例如下：
页面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
//注意下面这句是针对Firefox的，如果不写要报错（也能运行）
<meta http-equiv="Content-Type" content="application/vnd.mozilla.maybe.feed; charset=utf-8" />
<title></title>
<link href="02_.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="tool.js"></script>
<script type="text/javascript" src="02_.js"></script>
</head>
<body>
<input type="button" value="显示" onclick="new MesDiv().dostart('标题内容','提示内容',true)">
<select>
<option>select也能被盖住</option>
</select><br>
</body>
</html>
js代码
var bad,mes;
function MesDiv() {
this.isIE = document.all ? true : false;
this.init = function(title, content, bl) {
if (!bad || !mes) {
bad = this.baddingDiv();
mes = this.mesDiv(title, content, bl);
document.body.appendChild(bad);
document.body.appendChild(mes);
}
}
//底层，作为全屏的铺垫
this.baddingDiv = function() {
var d = createObject("div");
var ifr = createObject("iframe");
d.style.cssText = "position:absolute;width:100%;height:100%;" +
"background:#999999;left:0px;right:0px;top:0px;" +
"bottom:0px;-moz-opacity:0;filter:alpha(opacity = 0);" +
"z-index: 99;";
ifr.style.cssText = "position:absolute;width:100%;height:100%;" +
"background:#CCCCCC;left:0px;right:0px;top:0px;" +
"bottom:0px;-moz-opacity:0;" +
"z-index: 96;";
ifr.frameBorder = 0;
d.appendChild(ifr);
return d;
}
/*
* 显示消息的层
* title 标题内容
* content 提示内容
* bl是否有关闭事件及按钮，true为有
*/
this.mesDiv = function(title, content, bl) {
//消息框的外层
var d1 = createObject("div");
d1.style.cssText = "position: absolute;margin:-150px 0 0 -200px;z-index:100;" +
"top:50%;left:50%; width:400px;background-color: #FFFFFF;" +
"-moz-opacity:0.5;filter:alpha(opacity = 50);";
//标题层
var d2 = createObject("div");
d2.style.cssText = "height:20px;padding-top:8px;background-color: #DDDDDD;";
var d2_div1 = createObject("div");
d2_div1.style.cssText = "float:left;width:290px;padding-left:20px;overflow:hidden;word-break:keep-all; text-overflow:ellipsis";
d2_div1.appendChild(createText(title || "aaaaa"));
d2.appendChild(d2_div1);
if (bl || false) {
var d2_div2 = createObject("div");
d2_div2.style.cssText = "float:right;width:80px;text-align:right;padding-right:10px;";
var d2_div2_span = createObject("span");
d2_div2_span.onclick = function() {
new MesDiv().showBackground(bad, 0,false);
new MesDiv().showBackground(mes, 50,false);
}
d2_div2_span.innerHTML = "×"
d2_div2.appendChild(d2_div2_span);
d2.appendChild(d2_div2);
}
//内容层
var d3 = createObject("div");
d3.style.cssText = "border-top: #AAAAAA; border-top-style:solid;" +
"border-top-width:1px;height:100px;text-align:center;";
var d3_div1 = createObject("div");
d3_div1.style.cssText = "padding-top:20px;";
var d3_div1_img = createObject("img");
d3_div1_img.src = "warn.png";
d3_div1_img.align = "absmiddle";
d3_div1.appendChild(d3_div1_img);
d3_div1.appendChild(createText(content || "bbbbbb"));
d3.appendChild(d3_div1);
if (!bl || false) {
var d3_div2 = createObject("div");
d3_div2.style.cssText = "padding-top:10px;";
var d3_div2_img = createObject("img");
d3_div2_img.src = "load.gif";
d3_div2.appendChild(d3_div2_img);
d3.appendChild(d3_div2);
}
d1.appendChild(d2);
d1.appendChild(d3);
return d1;
}
this.dostart = function(title, content, bl) {
this.init(title, content, bl);
bad.style.display = "block";
mes.style.display = "block";
this.showBackground(bad, 60,true);
this.showBackground(mes, 100,true);
}
this.doend = function() {
this.init();
this.showBackground(bad, 0,false);
this.showBackground(mes, 50,false);
}
//让背景渐渐变暗
this.showBackground = function(obj, endInt,bl)
{
if (this.isIE)
{
if(bl){
obj.filters.alpha.opacity += 2;
if (obj.filters.alpha.opacity < endInt){
setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
}
}else{
obj.filters.alpha.opacity -= 2;
if (obj.filters.alpha.opacity > endInt){
setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
}else{
obj.style.display = "none";
}
}
}
else {
if(bl){
var al = parseFloat(obj.style.opacity);
al += 0.02;
obj.style.opacity = al;
if (al < (endInt / 100)){
setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
}
}else{
var al = parseFloat(obj.style.opacity);
al -= 0.02;
obj.style.opacity = al;
if (al > (endInt / 100)){
setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
}else{
obj.style.display = "none";
}
}
}
}
}
其中有一些没能按照设想的那样写，主要还是javascript的水平不行，不过效果出来了！！希望以后可以写出更好的！！呵呵！！