css样式
<style>
.test {
width: 300px;
height: 250px;
margin-left:100px;
border: 1px solid black;
}
p{
margin-left: 100px;
}
.name{
margin-top:30px;
margin-left: 20px;
}
.pwd{
margin-left: 20px;
}
#submit{
margin-left: 100px;
}
#home{
margin-left: 10px;
}
#pwd{
margin-left: 20px;
}
.screen{
width: 100%;
height: 900px;
background-color: rgba(219, 214, 214, 0.6);
z-index: 10000;
position: fixed;
top:0px;
left: 0px;
}
.mainbox{
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #fff;
margin-top: 100px;
border-radius: 10px;
}
.text{
width: 100px;
height: 50px;
margin: 0 auto;
line-height: 50px;
text-align: center;
}
.sure{
margin-left: 220px;
margin-top: 10px;
}
</style>
</head>
<body>
初始HTML布局
<div class="test">
<div class="name">
用户名：<input type="text" id="home"></div>
<p id="nametext"> </p>
<div class="pwd">
密码：<input type="password" id="pwd"></div>
<p id="pwdtext"> </p>
<input type="submit" value="注册" id="submit">
</div>
JS代码
<script>
//点击注册按钮产生半透明背景
var login=document.querySelector("#submit")
login.onclick=function(){
// console.log(123)
var screen=document.createElement("div")
screen.className="screen"
document.body.appendChild(screen)
//在半透明的背景上添加展示框
var mainbox=document.createElement("div")
mainbox.className="mainbox"
screen.appendChild(mainbox)
//在展示框中添加文字和确定按钮
var text=document.createElement("p")
text.className="text"
var sure=document.createElement("button")
mainbox.appendChild(text)
text.innerHTML="注册成功！"
mainbox.appendChild(sure)
sure.innerHTML="确定"
sure.className="sure"
mainbox.appendChild(sure)
//给确定按钮绑定点击时间，删除半透明模板
sure.onclick=function(){
// console.log(sure.parentElement.parentElement)
sure.parentElement.parentElement.remove()
}
}
</script>