php - 如何在具有透明背景的网站顶部创建可关闭的 div？

Question

我想制作一个漂浮在现有网站顶部的 div，我希望该网站在顶部有一个黑色 mask ，不透明度为 20%，而 div 的不透明度为 100%。

我在这个阶段仅限于使用 html 和 css。

我当前的代码是

.popup {
	margin: 75px auto;
	padding: 20px;
	background: #fff;
	width: 500px;
	box-shadow: 0 0 50px rgba(0,0,0,0.3);
	position: relative;
}

  <div id="popup1" class="overlay">
    <div class="popup">
      <h2><center>HEADER</center></h2>
      <div class="content">
        <p><center>CONTENT</center>
      </div>
    </div>
  </div>

我想添加一个关闭图标，以便人们在可能的情况下继续浏览该网站。

更重要的是，我希望整个网站的不透明度是深色的，而顶部的框是完全白色的。

我需要添加什么？

Answer 1

这是更新后的带有纯 css 弹出窗口的 fiddle

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 2s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}

<a class="button" href="#popup1">Let me Pop up</a>
<div id="popup1" class="overlay">
  <div class="popup">
    <a class="close" href="#">&times;</a>
    <h2>
      <center>HEADER</center>
    </h2>
    <div class="content">
      <p>
        <center>CONTENT</center>
    </div>
  </div>
</div>