<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框：固定位置</title>
</head>
<body>
<!-- 页眉 -->
<header>
<h2> 我的坟墓 </h2>
<button>进入</button>
</header>
<div class="modal"></div>
<!-- 遮罩 -->
<div class="modal-backdrop">
<!-- 弹层主体 -->
<div class="modal-body">
<!-- 关闭按钮 -->
<button class="close">退出</button>
<!-- 登录表单 -->
<div action="" method="post"></div>
<table>
<caption>拜访者登录</caption>
<tr>
<td><label for="email">暗语</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="password">密钥</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td colspan="2"><button style="width: 18em;">进入</button></td>
</tr>
</table>
</div>
<script>
const btn = document.querySelector("header button");
const modal = document.querySelector(".modal");
const close = document.querySelector(".close");
btn.addEventListener("click",setModal, false);
close.addEventListener("click",setModal, false);
function setModal(ev){
ev.preventDefault();
let status = window.getcomputedstyle(modal, null).getPropertyValue("display");
modal.style.display = status === "none" ? "block" : "none";
}
</script>
</body>
</html>
2.modal.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/* min-width: 980px; */
}
header{
background-color: lightcoral;
padding: 上下 左右;
padding: 0.5em 2em;
overflow: hidden;
}
header h2{
float: left;
}
header button {
float: left;
width: 10em;
height: 3em;
}
header button :hover{
background-color: aqua;
cursor: pointer;
}
/* 重点，模态框 */
/* .modal{
width: 100vw;
height: 100vh;
position: relative;
} */
/* 遮罩 */
.modal .modal-backdrop{
/* 固定定位总是相对于html，这样就省去像绝对定位需要一个定位元素当父级的麻烦 */
position: fixed;
/* position: relative; */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0,0, 0.5);
}
.modal .modal-body {
border: 1px solid;
padding: 1em;
min-width: 400px;
background-color: bisque;
position: fixed;
top: 5em;
left: 30em;
right: 30em;
}
.modal .modal-body form{
width: 428px;
}
.modal .modal-body form caption{
font-weight:bolder;
margin-bottom :1em;
}
.modal .modal-body form td {
padding: 8.5em;
}
.modal .modal-body form table td:first-of-type {
width: 5em;
}
.modal .modal-body form input {
width: 128%;
height: 2em;
}
.modal {
position: relative;
}
.modal .modal-body .close {
position: absolute;
right: 1em;
width: 4em;
height: 2em;
}
.modal button:hover {cursor: pointer;background-color: #fff;
}
/* 初始化应该将弹层隐藏起来 */
.modal{
display: none;
}