html：
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"
"http://www.w3.org/tr/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>new web project</title>
<style type="text/css">
body{margin: 0px;padding: 0px;font-family: 微软雅黑;}
a{text-decoration: none;color: #333; }
a:hover{color: #936;}
.op{width: 100%;height: auto;}
</style>
</head>
<body>
<div class="op" id="min"></div>
<div class="on" id="on">
<a href="http://www.php1.cn/"> <a href="http://www.php1.cn/"> </div>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
window.onload = function()
{
index.int();
index.setopacity(opmint,10);
index.onclickall();
}
</script>
</body>
</html>
javascript：
/**
* @author xiangwenwen
*/
var index = {
//初始化
int:function(){
//body高
var body = document.body;
var bodyheight = body.scrollheight;
//onclick父容器
var on = document.getelementbyid(on);
on.style.position = relative;
on.style.zindex = 5;
//状态父容器
var min = document.getelementbyid(min);
min.style.display = none;
min.style.position = absolute;
min.style.zindex = 10;
min.style.height = bodyheight + px;
min.style.display = none;
//透明层 www.2cto.com
var dodiv = document.createelement(div);
dodiv.setattribute(id,opmint);
min.appendchild(dodiv);
var opmint = document.getelementbyid(opmint);
opmint.style.height = bodyheight + px;
opmint.style.width = 100%;
opmint.style.background = #000;
//垂直居中div1
var div = document.createelement(div);
div.setattribute(id,admint);
min.appendchild(div);
var admint = document.getelementbyid(admint);
admint.style.position = absolute;
admint.style.width = 300px;
admint.style.height = 50px;
admint.style.border = 4px solid #963;
admint.style.top = 50%;
admint.style.left = 50%;
admint.style.margintop = -25px;
admint.style.marginright = 0px;
admint.style.marginbottom = 0px;
admint.style.marginleft = -150px;
admint.style.display = none;
//关闭按钮1
var a = document.createelement(a);
a.setattribute(href,#);
a.setattribute(id,close);
admint.appendchild(a);
var aclose = document.getelementbyid(close);
aclose.innerhtml = 关闭;
aclose.onclick = function(){
admint.style.display = none;
min.style.display = none;
}
//垂直居中div2
var div2 = document.createelement(div);
div2.setattribute(id,addiv2);
min.insertbefore(div2,min.childnodes[2]);
var addiv2 = document.getelementbyid(addiv2);
addiv2.style.position = absolute;
addiv2.style.width = 300px;
addiv2.style.height = 50px;
addiv2.style.border = 4px solid #789;
addiv2.style.top = 50%;
addiv2.style.left = 50%;
addiv2.style.margintop = -25px;
addiv2.style.marginright = 0px;
addiv2.style.marginbottom = 0px;
addiv2.style.marginleft = -150px;
addiv2.style.display = none;
//关闭按钮2
var a2 = document.createelement(a);
a2.setattribute(id,a2close);
a2.setattribute(href,#);
addiv2.appendchild(a2);
var a2close = document.getelementbyid(a2close);
a2close.innerhtml = 关闭;
a2close.onclick = function(){
addiv2.style.display = none;
min.style.display = none;
}
},
//背景透明
setopacity:function(node,level){
node = typeof node == string ? document.getelementbyid(node) : node;
if (document.all) {
node.style.filter = alpha(opacity =+ level +);
} else{
node.style.opacity = level / 100;
};
},
//初始化点击状态
onclickall:function(){
var onmin = document.getelementbyid(min);
var onck = document.getelementbyid(on);
var adon = onck.getelementsbytagname(a);
var adclose = document.getelementbyid(admint);
var acclose = document.getelementbyid(addiv2);
adon[0].onclick = function(){
onmin.style.display = block;
adclose.style.display = block;
}
adon[1].onclick = function(){
onmin.style.display = block;
acclose.style.display = block;
}
}
}
对于dom的增删改查，上述代码中木有改，方法是replacechild()两个参数，一个是要插入的节点，二个是要替换的节点。这方法是用于删除后替换一个节点，如果不想替换，只需求删除，直接上removechild()。
业精于勤，荒于嬉。行成于思，毁于随。新人的成长，在于总结。所有文章与例子，仅是自我总结，都仅供学习交流。