如何用HTML/CSS创建带黑色半透明遮罩的可关闭悬浮Div

我来帮你搞定这个需求，全程只用HTML和CSS就能实现全局半透明遮罩、纯白弹窗和关闭按钮的效果，不需要JavaScript：

1. 调整HTML结构 #

我们需要加一个隐藏的复选框来控制弹窗的显示/隐藏（纯CSS实现交互逻辑），同时添加关闭按钮元素：

<!-- 隐藏的复选框，用于控制弹窗状态 -->
<input type="checkbox" id="togglePopup">

<div id="popup1" class="overlay">
  <div class="popup">
    <!-- 关闭按钮，关联复选框 -->
    <label for="togglePopup" class="close-btn">&times;</label>
    
    <h2>HEADER</h2>
    <div class="content">
      <p>CONTENT</p>
    </div>
  </div>
</div>

小提示：<center>标签已经是过时的HTML元素了，建议用CSS的text-align: center来实现内容居中，更符合现代规范。

2. 补充完整CSS样式 #

把下面的CSS代码加到你的样式表里，就能实现你要的效果：

/* 隐藏用于控制的复选框 */
#togglePopup {
  display: none;
}

/* 全局遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2); /* 20%不透明度的黑色遮罩 */
  display: none; /* 默认状态下隐藏遮罩和弹窗 */
  justify-content: center;
  align-items: center;
  z-index: 999; /* 确保遮罩在原有网站内容的上方 */
}

/* 复选框被选中时，显示遮罩和弹窗 */
#togglePopup:checked + .overlay {
  display: flex;
}

/* 弹窗容器样式 */
.popup {
  margin: 0; /* 去掉原有的margin，用flex布局实现更精准的居中 */
  padding: 20px;
  background: #fff; /* 纯白背景，不透明度100% */
  width: 500px;
  box-shadow: 0 0 50px rgba(0,0,0,0.3);
  position: relative; /* 为关闭按钮提供定位基准 */
  text-align: center; /* 替代<center>标签，实现内容居中 */
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #000; /* 鼠标悬停时加深颜色，提升交互感 */
}

/* 可选：优化弹窗内容的间距 */
.popup h2 {
  margin-top: 0;
}
.popup .content p {
  margin-bottom: 0;
}

效果说明 #

• 遮罩层：固定覆盖整个浏览器窗口，黑色背景带20%不透明度，默认隐藏；当复选框被选中时自动显示。
• 弹窗：纯白背景（不透明度100%），通过flex布局在遮罩层中完美居中，阴影效果增强视觉层次感。
• 关闭按钮：右上角的叉号图标，点击后会触发复选框状态变化，从而隐藏遮罩和弹窗，让用户回到原网站浏览。

如果需要默认打开弹窗，只需要给复选框加上checked属性：<input type="checkbox" id="togglePopup" checked>

内容的提问来源于stack exchange，提问作者Joseph Giuffrida