querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
× 表示叉号
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/login.css" />
<script type="text/javascript">
window.onload = function() {
// 点击然后弹出弹框
// querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
// // querySelector("button");获取文档中第一个button元素
var btn = document.querySelector("button");
btn.onclick = function() {
var box = document.querySelector(".box");
box.style.display = "flex";
}
// 点击叉号然后关闭弹窗
// querySelector(".close");获取文档中 class="close" 的第一个元素:
var close = document.querySelector(".close");querySelector(".close");
close.onclick = function() {
var box = document.querySelector(".box");
box.style.display = "none";
}
}
</script>
</head>
<body>
<button type="button">显示登录框</button>
<div class="box">
<div class="content">
<!-- × 表示叉号 -->
<span class="close">×</span>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body,.box{
width: 100%;
height: 600px;
}
body{
position: relative;
}
.box{
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.333);
display: flex;
justify-content: space-around;
align-items: center;
display: none;
}
.box .content .close{
float: right;
width: 16px;
display: block;
}
.box .content{
width: 750px;
height: 380px;
background-color: #FFFFFF;
}