html 部分：

<script type="text/javascript">
window.onload=function(){
var btn = document.querySelector("button");//遍历全部button 找全部button
btn.onclick=function(){
var box = document.querySelector(".box");
//querySelector 只找一行
box.style.display="flex";
}

var close = document.querySelector(".close");
close.onclick=function(){
var box = document.querySelector(".box");
box.style.display="none";
}

}
</script>

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 .co .close{
float: right;
width: 16px;
display: block;
}
.box .co{
width: 750px;
height: 380px;
background-color: #FFFFFF;
}