<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box {
border: 1px solid black;
background: lightblue;
text-align: center;
width: 300px;
margin: 200px auto;
display: none;
}
/* body{
background: rgba(0,0,0,0.5);
} */
</style>
<script>
window.onload = function() {
var obtn = document.getElementById("btn");
var oDiv = document.getElementById("box");
var obtn2 = document.getElementById("confrim");
obtn.onclick = function() {
document.body.style.background = "rgba(0,0,0,0.5)";
oDiv.style.display = "block";
this.disabled = "disable";
}
obtn2.onclick = function() {
document.body.style.background = "white";
oDiv.style.display = "none;"
this.disabled = false;
}
}
</script>
</head>
<body>
<!-- <button id="btn" disabled="disabled">弹窗</button> -->
<button id="btn">弹窗</button>
<div id="box">
登录窗口
<p>账号:<input type="text" /></p>
<p>密码:<input type="text" /></p>
<p>
<input type="button" name="" id="" value="取消" />
<input type="button" name="" id="confrim" value="确定" />
</p>
</div>
</body>
</html>