<style>
* {
margin: 0;
padding: 0;
}
.show {
width: 300px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.show > span {
font-size: 30px;
position: absolute;
right: -20px;
top: -20px;
text-align: center;
border-radius: 50%;
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="show">
<span>×</span>
</div>
<script>
let show = document.querySelector(".show");
let close = document.querySelector("span");
window.onload = function () {
show.style.display = "block";
close.onclick = function () {
show.style.display = "none";
setTimeout(() => {
show.style.display = "block";
}, 2000);
};
};
</script>
</body>