JavaScript模拟系统弹出框，顺便操作dom练练手
程序员文章站
2022-04-30 16:25:58
...
最近一段时间里，闲着无事，顺便写了个小demo练了练手，来操作dom，分享之。
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()。
业精于勤，荒于嬉。行成于思，毁于随。新人的成长，在于总结。所有文章与例子，仅是自我总结，都仅供学习交流。
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()。
业精于勤，荒于嬉。行成于思，毁于随。新人的成长，在于总结。所有文章与例子，仅是自我总结，都仅供学习交流。