<style>
* {
margin: 0;
padding: 0;
}
.mybox {
width: 100vw;
height: 90vh;
background-color: aquamarine;
position: absolute;
top: 40px;
left: 0;
}
.sbox {
width: 300px;
height: 200px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.cancel {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
position: absolute;
background-color: antiquewhite;
border-radius: 50%;
right: -10px;
top: -20px;
}
</style>
</head>
<body>
<button>点击弹出模态框</button>
<script>
let btn = document.querySelector("button");
let falg = false; //记录是否有弹框
btn.onclick = function () {
if (!falg) {
// 大框
let mybox1 = document.createElement("div");
mybox1.className = "mybox";
// 登录框
let sbox = document.createElement("div");
sbox.className = "sbox";
mybox1.append(sbox);
// 取消按钮
let cancel = document.createElement("div");
cancel.className = "cancel";
cancel.innerHTML = "×";
sbox.append(cancel);
cancel.onclick = function () {
cancel.parentNode.parentNode.remove();
};
document.body.append(mybox1);
falg = true;
} else {
falg = false;
}
};
</script>
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
