css制作弹窗

使用纯CSS制作弹窗

通过CSS的position和display属性结合伪类或:target选择器实现基础弹窗效果。以下为两种常见实现方式：

方法1：利用:target伪类触发弹窗

<!-- HTML结构 -->
<a href="#modal" class="open-btn">打开弹窗</a>
<div id="modal" class="modal">
  <div class="modal-content">
    <a href="#" class="close-btn">×</a>
    <p>弹窗内容</p>
  </div>
</div>

/* CSS样式 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

.modal:target {
  display: block;
}

.modal-content {
  position: relative;
  width: 80%;
  max-width: 500px;
  margin: 100px auto;
  padding: 20px;
  background: white;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}

方法2：利用复选框隐藏状态控制

<label for="modal-toggle" class="open-btn">打开弹窗</label>
<input type="checkbox" id="modal-toggle" hidden>
<div class="modal">
  <label for="modal-toggle" class="overlay"></label>
  <div class="modal-content">
    <label for="modal-toggle" class="close-btn">×</label>
    <p>弹窗内容</p>
  </div>
</div>

.modal {
  display: none;
}

#modal-toggle:checked ~ .modal {
  display: block;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 1001;
}

使用CSS动画增强效果

为弹窗添加淡入或滑动动画：

.modal-content {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

注意事项

• 弹窗内容需设置z-index确保在最上层
• 移动端需考虑视口单位（vw/vh）适配
• 关闭按钮需明显且易于点击
• 背景遮罩层应阻止底层页面滚动（可通过body { overflow: hidden; }实现）

进阶技巧

通过CSS变量控制弹窗尺寸：

.modal-content {
  width: var(--modal-width, 80%);
  max-width: var(--modal-max-width, 600px);
}

响应式调整：

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    margin: 20px auto;
  }
}