不用JavaScript，只用CSS也能制作弹窗？

当你需要给网站添加一个弹窗时，第一反应可能是寻找JavaScript插件或库。但你可能不知道，利用一些css技巧，我们完全可以创建一个功能完整的弹窗，而不需要写一行JavaScript代码。

这种方法听起来有点特别，但它确实可行。下面我们来一步步了解如何只用html和CSS实现弹窗效果。

弹窗是什么？

弹窗是悬浮在主页面内容之上的窗口，用户必须与之交互后才能继续操作。你经常能看到它们，比如登录框、图片展示、或者各种提示信息。

通常，用JavaScript实现弹窗需要处理三件事：

点击按钮时显示弹窗。
点击关闭按钮或弹窗外区域时隐藏它。
管理键盘操作（比如按ESC键关闭）。

那么，不用JavaScript，我们怎么控制弹窗的显示和隐藏呢？

答案是利用CSS的两个特性：:target 伪类和“复选框技巧”。

核心原理：两种CSS方法

1. 使用 :target 伪类

浏览器地址栏里的 # 号后面部分叫做URL片段标识。当一个元素的 id 和这个标识匹配时，这个元素就会被 :target 选中。

我们可以利用这一点：让“打开弹窗”的链接指向弹窗的ID（比如 #myModal），然后通过 :target 选择器来设置弹窗的可见样式。

2. 使用“复选框技巧”

这个技巧利用了一个隐藏的复选框（<input type="checkbox">）。通过点击与这个复选框关联的 <label>，我们可以改变复选框的选中状态。然后，CSS可以根据 :checked 这个状态来控制弹窗的显示和隐藏。

关键的CSS属性

无论用哪种方法，我们都需要一些核心的CSS属性来塑造弹窗：

position: fixed;：让弹窗脱离正常文档流，并相对于浏览器窗口定位，实现覆盖效果。
opacity 和 pointer-events：控制弹窗的透明度和是否能够交互（比如点击）。
z-index：确保弹窗显示在所有其他内容之上。
transition：为显示和隐藏的过程添加平滑的动画效果。

方法一：使用 :target 制作弹窗

这是最简单的方法，适合快速实现。

HTML结构：

<!-- 1. 触发按钮：一个普通的链接 -->
<a href="#myModal">打开弹窗</a>

<!-- 2. 弹窗结构 -->
<div id="myModal" class="modal">
  <!-- 背景遮罩层，点击它可以关闭弹窗 -->
  <a href="#" class="modal__backdrop"></a>
  <!-- 弹窗内容区 -->
  <div class="modal__content">
    <h2>这是一个CSS弹窗</h2>
    <p>看，没有用JavaScript！</p>
    <!-- 关闭按钮：链接到空片段，会取消 :target 状态 -->
    <a href="#" class="modal__close">关闭</a>
  </div>
</div>

CSS样式：

/* 弹窗容器 - 默认隐藏 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* 完全透明 */
  pointer-events: none; /* 不允许交互 */
  transition: opacity 0.3s ease; /* 透明度过渡动画 */
}

/* 当弹窗成为目标时，显示它 */
.modal:target {
  opacity: 1; /* 完全不透明 */
  pointer-events: auto; /* 允许交互 */
}

/* 弹窗内容框 */
.modal__content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative; /* 为了内部定位 */
}

/* 背景遮罩层，覆盖整个视口用于关闭 */
.modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: default; /* 显示默认指针，暗示可点击关闭 */
}

这种方法的优缺点：

优点：非常简单，代码量少。
缺点：会在浏览器地址栏中添加哈希（如 #myModal），影响浏览器的前进/后退历史记录。

方法二：使用“复选框技巧”

这种方法更复杂一些，但不会改变URL。

HTML结构：

<!-- 1. 隐藏的复选框，作为状态开关 -->
<input type="checkbox" id="modalToggle" class="modal-checkbox">

<!-- 2. 触发按钮：一个标签，关联到那个复选框 -->
<label for="modalToggle" class="modal-trigger">打开弹窗</label>

<!-- 3. 弹窗结构 -->
<div class="modal">
  <div class="modal__content">
    <h2>使用复选框实现的弹窗</h2>
    <p>这种方法不会改变URL。</p>
    <!-- 关闭按钮：同样是关联到同一个复选框的标签 -->
    <label for="modalToggle" class="modal__close">关闭</label>
  </div>
</div>

CSS样式：

/* 隐藏复选框 */
.modal-checkbox {
  display: none;
}

/* 弹窗容器 - 默认隐藏 (样式同上) */
.modal {
  position: fixed;
  ... /* 省略，与上面 .modal 样式相同 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 当复选框被选中时，显示它后面的兄弟元素 .modal */
.modal-checkbox:checked ~ .modal {
  opacity: 1;
  pointer-events: auto;
}

这种方法的优缺点：

优点：不改变URL，用户体验更好。
缺点：HTML结构稍复杂，需要理解CSS兄弟选择器（~）。

让弹窗更出色：添加动画和响应式设计

添加入场动画
我们可以让弹窗内容不是简单地淡入，而是带有一些动态效果。

.modal__content {
  ... /* 原有样式 */
  transform: scale(0.8); /* 初始状态缩小一点 */
  opacity: 0; /* 初始状态透明 */
  transition: all 0.3s ease; /* 过渡所有属性 */
}

.modal:target .modal__content,
.modal-checkbox:checked ~ .modal .modal__content {
  transform: scale(1); /* 最终状态恢复正常大小 */
  opacity: 1; /* 最终状态不透明 */
}

响应式设计
确保在手机等小屏幕设备上也能良好显示。

.modal__content {
  width: 90%; /* 在小屏幕上占用90%宽度 */
  max-width: 500px; /* 在大屏幕上最大宽度为500px */
}

@media (max-width: 600px) {
  .modal__content {
    padding: 1rem; /* 在小屏幕上减少内边距 */
    width: 95%; /* 宽度再增加一点 */
  }
}

需要注意的地方

虽然纯CSS弹窗很酷，但也有一些局限性：

可访问性：屏幕阅读器等辅助工具可能无法很好地理解纯CSS弹窗的状态变化。为弹窗添加ARIA属性可以改善这一点。

<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div class="modal__content">
    <h2 id="modalTitle">弹窗标题</h2>
    ...
  </div>
</div>

功能限制：无法实现按ESC键关闭弹窗，或者自动聚焦到弹窗内的输入框等高级交互。

总结

只用CSS创建弹窗是一个展示CSS强大能力的有趣实践。对于简单的应用场景，比如图片展示、简单的提示框或确认对话框，它是一个非常轻量级且高效的解决方案。

它的主要优点是：

性能好：无需加载和解析JavaScript。
简单可靠：代码更少，出错的概率也更低。

当然，如果你的弹窗需要复杂的交互、严格的可访问性要求或者需要与后端通信，那么JavaScript仍然是更合适的选择。但对于许多基础需求来说，纯CSS方案完全值得你尝试一下。下次你需要弹窗时，不妨先想想，是不是用CSS就能搞定呢？

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12938