<!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(){
var btn=document.querySelector("button");
btn.onclick=function(){
var box=document.querySelector(".box");
box.style.display="flex";
}
var close=document.querySelector(".close");
close.onclick=function(){
var box=document.querySelector(".box");
box.style.display="none";
}
}
// document.querySelectorAll() 找全部
// 配合 遍历使用 找到所以button
// document.querySelector()找一个
</script>
</head>
<body>
<button type="button">显示登录框</button>
<div class="box">
<div class="content">
<span class="close">×</span>
</div>
</div>
</body>
</html>
*{
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;
}