最可靠纯CSS模态窗方案是:target伪类，需确保href与id精确匹配、模态窗挂载body下、用flex居中、处理z-index层叠上下文，并为iOS WebView备选checkbox hack。
用 :target 实现无 JS 显示/隐藏逻辑
纯 CSS 模态窗最可靠、兼容性最好的触发方式就是 :target —— 它不依赖 JS，也不需要监听点击事件，只靠 URL 锚点变化就能生效。关键在于：触发链接的 href 必须精确匹配模态窗容器的 id，比如 <a href="#modal-1">打开</a> 对应 <div id="modal-1" class="modal"></div>。
常见错误是 ID 大小写不一致、含空格或特殊字符（如中文），导致锚点不匹配，:target 完全不生效；还有人把 id 写在 .modal-content 里，而没写在最外层遮罩容器上，也会失效。
必须确保模态窗默认状态为不可见：
-
opacity: 0+visibility: hidden（不能只用display: none，否则过渡动画无效） -
transition要写在非:target状态下，否则首次打开无动画 - 关闭按钮需用
<a href="#">或指向页面顶部（如<a href="#top">），避免残留#modal-1在地址栏
用 flex + max-width 做跨终端居中与缩放
别再用 position: absolute 配 transform: translate(-50%, -50%) 居中——它在 iOS Safari 某些版本中会因滚动触发重绘而抖动，且在小屏上容易溢出。直接让遮罩层 .modal-overlay 设为 display: flex，配合 justify-content: center 和 align-items: center 更稳。
立即学习“前端免费学习笔记（深入）”；
内容区要真正自适应，得靠组合策略：
-
width: 90%保证小屏不撑破视口，max-width: 500px防止桌面端过宽 -
max-height: 80vh+overflow: auto，避免长内容把弹窗拉得过高、遮不住背景 - 移动端慎用
font-size: clamp()控制标题字号，但注意 Safari 15.4 以下不支持，可降级为媒体查询
遮罩层与内容的 z-index 和层级陷阱
纯 CSS 模态窗最容易被忽略的，是 z-index 的隐式堆叠上下文问题。即使你给 .modal-overlay 设了 z-index: 1000，如果它的某个父容器有 transform、filter 或 will-change，就会创建新层叠上下文，导致整个模态窗被“框死”在那个父容器内部，压不住导航栏或固定头部。
排查方法很简单：打开 DevTools，选中模态窗最外层，看 Computed 面板里 stacking context 是否显示 “Yes”。如果是，就得往上逐级检查父元素有没有无意中触发层叠上下文。
安全做法是让模态窗直接挂载在 <body> 下（不要嵌套在 .container 或 .main 里），并确保它和页面其他高优先级组件（如 header、toast）的 z-index 数值不冲突。推荐基准值：header: 100，toast: 200，modal-overlay: 1000，modal-content: 1001。
关闭交互与键盘可访问性补漏
纯 CSS 方案天然缺失 Esc 关闭和焦点管理，但至少能补上基础可访问性：关闭按钮必须是 <a> 或 <button>，不能是伪元素 ::after；同时给 .modal-content 加 tabindex="-1"，确保按 Tab 键时焦点能进入弹窗内部。
更关键的是，点击遮罩层关闭必须可用——很多教程只让点击 .modal-content 内部的 × 按钮，却忘了用户习惯点背景关闭。实现方式是把 .modal-overlay 和 .modal-content 分成两个同级子元素，都放在同一个 id 容器下，然后用 .modal:target .modal-overlay 控制遮罩，.modal:target .modal-content 控制内容。这样点击遮罩层本身也能触发 :target 状态，但需注意：遮罩层必须设 cursor: pointer，否则部分安卓浏览器会忽略点击。
最后提醒：iOS 上 :target 在某些 WebView（如微信内置浏览器）中存在延迟或失效问题，若项目必须覆盖这类环境，建议 fallback 到 checkbox hack，即用隐藏 <input type="checkbox"> + :checked ~ .modal 控制显隐，虽然 HTML 结构稍重，但稳定性更高。
