技术需求：实现点击链接触发的纯CSS简易模态窗口

下面是完全不依赖JavaScript、仅用CSS实现的极简模态弹窗方案，通过点击链接触发，代码量精简：

完整代码 #

HTML #

<!-- 触发链接 -->
<a href="#modal">打开弹窗</a>

<!-- 模态弹窗容器 -->
<div id="modal" class="modal">
  <!-- 遮罩层 -->
  <div class="modal-overlay"></div>
  <!-- 弹窗内容 -->
  <div class="modal-content">
    <h3>这是弹窗标题</h3>
    <p>弹窗内容示例</p>
    <!-- 关闭按钮 -->
    <a href="#" class="modal-close">关闭</a>
  </div>
</div>

CSS #

/* 默认隐藏弹窗 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

/* 遮罩层样式 */
.modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}

/* 弹窗内容样式 */
.modal-content {
  position: relative;
  margin: 10% auto;
  padding: 20px;
  width: 80%;
  max-width: 400px;
  background: white;
  border-radius: 4px;
}

/* 点击触发链接后，显示弹窗 */
.modal:target {
  display: block;
}

/* 关闭按钮样式 */
.modal-close {
  display: inline-block;
  margin-top: 15px;
  padding: 6px 12px;
  background: #eee;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
}

核心原理说明 #

• 利用CSS的:target伪类：当用户点击带有href="#modal"的链接时，页面会定位到id为modal的元素，此时:target选择器会匹配该元素，将其从隐藏状态改为显示。
• 关闭按钮通过href="#"清空当前锚点，使得:target不再匹配弹窗元素，弹窗重新隐藏。
• 采用fixed定位让弹窗和遮罩层固定在视口，z-index确保弹窗层级高于页面其他内容。

如果需要添加简单的过渡动画，可以把display替换为opacity和visibility，示例：

.modal {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  /* 其他定位样式不变 */
}

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

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