纯css弹窗的核心机制是利用:href="#id"锚点链接触发目标元素的:target伪类样式变化。关键要求包括：href必须为#id格式、目标元素需有对应id、css中用:target控制显隐，且:target仅匹配被锚点直接指向的元素而非链接本身。
点击链接后显示对应弹窗内容
只要锚点链接指向页面内某个元素的 id，且该元素匹配 :target 伪类，就能触发样式变化——这是实现无 JS 弹窗最核心的机制。关键在于：链接的 href 必须是 #id 形式，目标元素必须有对应 id，且 CSS 中用 :target 控制显隐。
常见错误是把 :target 写成作用于链接本身（比如 a:target），其实它永远只匹配被 URL 锚点直接指向的那个元素。另外，如果页面加载时 URL 带 #modal-1，弹窗会默认打开，这点要提前考虑是否符合交互预期。
-
href必须写成#modal-1，不能是javascript:void(0)或# - 目标
<div id="modal-1"> 必须在 HTML 中真实存在，且位置不限（可放在底部） <li>不要依赖 <code>:target做复杂状态管理——它只响应 URL 锚点，无法判断“是否已关闭” - 弹窗容器必须设
position: fixed，否则:target触发时页面会跳转到该元素顶部 - 避免用
visibility: hidden / visible，因为它不释放文档流，可能影响布局或遮挡下方内容 - 关闭方式只能是点击其他链接、按浏览器后退、或再点一次同个链接（触发 :target 失效）
-
pointer-events: none必须加在默认状态，否则即使透明用户也能误触弹窗内按钮 - 动画时间建议 ≤ 300ms，太长会让用户觉得卡顿；过短则不易感知
- 别对
height或max-height做过渡——高度未知时难控制，易出现闪烁或错位 - 每个弹窗的
id和链接href必须严格一一对应，大小写敏感 - 避免在同一个页面混用 JS 和纯 CSS 弹窗逻辑，URL 锚点会被两者竞争，行为不可控
- 移动端 Safari 对
:target的渲染有时延迟，可加will-change: opacity提前提示优化
用 display: none / block 实现基础显隐
最直白的方式是靠 display 切换，但要注意层级和滚动行为。默认隐藏弹窗，:target 匹配时设为 display: block，同时加 position: fixed 和 z-index 确保浮层效果。
容易踩的坑是没处理背景遮罩或 body 滚动锁定——CSS 本身无法禁用滚动，只能靠 overflow: hidden 临时加在 body 上，但这需要 JS 配合；纯 CSS 方案只能接受背景仍可滚动，或改用 position: fixed 把整个弹窗区域钉住。
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
添加过渡动画让弹窗更自然
:target 是一个状态，所以能配合 transition 做入场动画，比如淡入+缩放。但注意：只有可动画属性才生效，display 不可过渡，得换用 opacity 和 transform。
典型做法是默认设 opacity: 0; transform: scale(0.95); pointer-events: none;，:target 时改为 opacity: 1; transform: scale(1); pointer-events: auto;。这样既平滑，又避免未激活时仍可点击。
多个弹窗共存时的注意事项
多个 :target 弹窗可以共存，但同一时刻只有一个生效（URL 只能有一个锚点）。想实现“点 A 弹窗、再点 B 替换为 B 弹窗”，天然支持；但想“同时打开 A 和 B”，CSS 无解，必须上 JS。
实际项目中常遇到的问题是：多个弹窗共享一套样式，结果 :target 一匹配，所有弹窗都显示。解决方法是给每个弹窗加独立 class，然后写具体选择器，比如 .modal-1:target、.modal-2:target，而不是笼统地写 .modal:target。
