问题描述：
我从网上找了一个igoogle的效果代码，修改了之后想加上一个遮罩层的效果，就是点一个button后整个页面变灰被一个层覆盖住。层覆盖的代码单独试用的时候可以，但是一加到我那个页里之后当显示遮罩层时，只是在原来页面的最上面加了一个层，整个原来的页面全部移到下面去了，有点像紧挨着<body>标签加了一个层。
有哪位大侠能帮忙解决解决啊，不知道是哪里出了问题。
zIndex 也试过了，没解决。论坛不知道怎么上传附件，我把它传到纳米盘了：这个是Igoogle加上遮罩层
http://d.namipan.com/d/79a9e2b7dadc2fd32156a51d0a04f6519d1b3240f43d0000这个是单独的遮罩层代码，忘了在哪down的了。
http://d.namipan.com/d/d0e20dfe9d7c642763bd912da8a6a09e88a6af48e8190000
我从网上找了一个igoogle的效果代码，修改了之后想加上一个遮罩层的效果，就是点一个button后整个页面变灰被一个层覆盖住。层覆盖的代码单独试用的时候可以，但是一加到我那个页里之后当显示遮罩层时，只是在原来页面的最上面加了一个层，整个原来的页面全部移到下面去了，有点像紧挨着<body>标签加了一个层。
有哪位大侠能帮忙解决解决啊，不知道是哪里出了问题。
zIndex 也试过了，没解决。论坛不知道怎么上传附件，我把它传到纳米盘了：这个是Igoogle加上遮罩层
http://d.namipan.com/d/79a9e2b7dadc2fd32156a51d0a04f6519d1b3240f43d0000这个是单独的遮罩层代码，忘了在哪down的了。
http://d.namipan.com/d/d0e20dfe9d7c642763bd912da8a6a09e88a6af48e8190000
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<script>
var cover =mydiv= null;
window.onload = function() {
cover=document.getElementById('coverdiv');
cover.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
cover.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"
cover.style.display = "none"; mydiv = document.getElementById('mydiv');
with (mydiv){
style.width = document.documentElement.scrollHeight/2+"px";
style.height = document.documentElement.scrollHeight/2+"px";
style.left = (document.documentElement.scrollWidth - mydiv.offsetWidth)/2+"px";
style.top = (document.documentElement.scrollHeight - mydiv.offsetHeight)/2+"px"; style.display = "none";
}
};</script>
</head>
<BODY>
<div id='coverdiv' style="filter:alpha(opacity=80);Opacity:0.8; background-color:#aaaaaa; position:absolute; left:0px; top:0px;"> </div>
<div id='mydiv' style="border:1px solid #666666 ; padding:50px; position:absolute; background-color:#FFEE00">
我的层 <br>
<input value="关闭" type="button" onclick="javacript:mydiv.style.display =cover.style.display = 'none';" />
</div><input value='点击演示遮罩层' type="button" onclick="javascript:mydiv.style.display =cover.style.display = '';" /></BODY> </HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src = "window.js"></script>
<link rel="stylesheet" type="text/css" href="css/book_infor.css">
<script>
function closes()
{
document.body.removeChild(document.getElementById("dialog"));
document.getElementById("mask").style.visibility = "hidden";
}
</script>
<body>
<span style="position:absolute;z-index:1;">
<input type="button" value="添加书籍" onclick="new windows({title : '添加图书',width : '400', height : '300', backgroundColor : 'white', titleColor : 'white',content :''});">
</span>
<script>
new query();
</script><div id="mask"></div>
</body>
</html> JS代码 :ClassModel =
{
create : function()
{
return function()
{
this.construct.apply(this, arguments);
}
}
}
Extend = function(desc, src)
{
for(var c in src)
{
desc[c] = src[c];
}
return desc;
}
Object.prototype.extend = function(src)
{
return Extend.apply(this, [this, src]);
}
var windows = ClassModel.create();
windows.prototype =
{
construct : function(jsonObject)
{
this.title = jsonObject.title;
this.width = jsonObject.width;
this.height = jsonObject.height;
this.titleColor = jsonObject.titleColor;
this.backgroundColor = jsonObject.backgroundColor;
this.LwHeight = (document.body.clientHeight - this.width) / 2; //让div在屏幕的中间
this.LwWidth = (document.body.clientWidth - this.height) / 2; //让div在屏幕的中间
this.content = jsonObject.content;
var loginWindow = this.createLoginBody();
var title = this.createLoginTitle();
loginWindow.appendChild(title);
var cont = this.createContent();
loginWindow.appendChild(cont);
document.getElementById("mask").style.visibility = "visible";
document.body.appendChild(loginWindow);
}, createLoginBody: function() //创建登陆框， 即整个框
{
var loginWindow = document.createElement("div");
loginWindow.id = "dialog";
with(loginWindow.style)
{
border = "1px solid white";
zIndex = "3";
position = "absolute";
width = this.width + "px";
height = this.height + "px";
top = this.LwHeight + "px";
left = this.LwWidth + "px";
backgroundColor = this.backgroundColor;
}
return loginWindow;
},
createLoginTitle:function() //创建 标题 即效果图的黑色标题
{
var title = document.createElement("div");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td_1 = document.createElement("td");
var td_2 = document.createElement("td"); var close = document.createElement("img");
close.src = "close.jpg";
close.onclick = function()
{
document.body.removeChild(title.parentNode);
document.getElementById("mask").style.visibility = "hidden";
}
td_1.innerHTML = this.title;
with(title.style)
{
width = "100%";
height = this.height / 12 + "px";
backgroundImage = "url('titleBg.jpg')";
}
with(table.style)
{
color = "white";
fontSize = "10pt";
width = "100%";
backgroundImage = "url('titleBg.jpg')";
color = "black";
fontWeight = "bold";
}
td_2.style.textAlign = "right";
td_2.appendChild(close);
tr.appendChild(td_1);
tr.appendChild(td_2);
tbody.appendChild(tr);
table.appendChild(tbody);
title.appendChild(table); return title;
},
createContent : function()
{
var div = document.createElement("div");
if(typeof(this.content) == 'string')
{
div.innerHTML = this.content;
}else
{
div.appendChild(this.content);
}
with(div.style)
{
paddingLeft = "80px";
paddingTop = "50px";
float = "left";
width = "100%";
}
return div;
}
}