-- 删除添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adding and Removing Elements</title>
<style>
.overlay{
background-color: #000;
opacity: 0.5;
filter: alpha(opacity=50);
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
}
.overlaymsg{
position: absolute;
background-color: yellow;
padding: 10px;
width: 200px;
height: 200px;
font-size: 2em;
z-index: 11;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<p>Existing material.</p>
<script>
function displayPopup(){
//创建覆盖并将其附加到页面
var overplay = document.createElement("div"); //创建元素
overplay.setAttribute("id","overlay"); //创建设置元素
overplay.setAttribute("class","overlay");
document.body.appendChild(overplay);
//创建图像并将其附加到页面
var msg = document.createElement("div");
var txt = document.createTextNode("Please join our mailing list!(Click to close.)");
msg.appendChild(txt);
msg.setAttribute("id","msg");
msg.setAttribute("class","overlaymsg"); //css是如何影响 元素的js动作的表现的,这行的错误,会影响下一行
//单击以恢复页面
msg.onclick = restore; //设置 动作触发
//将消息附加到覆盖
document.body.appendChild(msg);//添加到页面
}
//将页面恢复正常,removeChild() 删除元素
function restore(){
console.log("*****************");
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("msg"));
}
window.onload = function(){
displayPopup();
}
</script>
</body>
</html>