弹窗必须点击按钮触发，禁止自动弹出；用<dialog>语义化结构，配合localStorage持久化存储同意状态，并处理滚动穿透、焦点锁定及iOS兼容性问题。
点击按钮才触发弹窗，别一进页面就遮住内容
用户没点同意就强制弹出，既违反无障碍规范，也容易被浏览器拦截。必须用 button 或其他可交互元素显式触发，不能靠 window.onload 自动弹。CSS 里给弹窗加 display: none 初始隐藏，JS 里只在点击后设为 display: block 或用 classList.toggle() 控制显隐。
常见错误是把弹窗 HTML 写在 <body> 开头，结果页面加载瞬间闪一下。正确做法是把它放在 </body> 前，且确保 JS 在 DOM 加载完再执行——用 DOMContentLoaded 事件或把 <script> 放在底部。
弹窗结构要语义清晰，不能只靠 div 堆出来
免责声明不是装饰性浮层，它涉及法律效力和屏幕阅读器识别。外层用 <dialog> 标签（现代浏览器支持良好），内部标题用 <h3>，正文用 <p>，按钮必须带 type="button" 防止意外提交表单。关闭按钮建议同时支持点击 × 和按 Escape 键：
<dialog id="disclaimer-dialog"> <h3>免责声明</h3> <p>本服务提供的信息仅供参考，不构成专业建议……</p> <button type="button" id="agree-btn">我已阅读并同意</button> </dialog>
注意：<dialog> 默认有 inert 属性（阻止背后内容聚焦），比手写 aria-hidden 更可靠；但旧版 Safari 不支持，需加 polyfill 或降级为 div + 手动管理焦点。
立即学习“前端免费学习笔记（深入）”；
用户点了“同意”后，得真正记住这个操作
仅靠 JS 变量记一次是无效的——刷新页面就重来。必须持久化存储，推荐优先用 localStorage：
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 检查
localStorage.getItem('disclaimerAccepted')是否为"true"，是则跳过弹窗 - 点击“同意”按钮后执行
localStorage.setItem('disclaimerAccepted', 'true') - 避免用
sessionStorage，它关掉标签页就失效，起不到“一次性确认”作用 - 如果网站有登录态，更稳妥的做法是把同意状态存在后端，前端只做本地缓存 fallback
别忘了加时间戳或版本号字段（如 disclaimerVersion: "2024-06"），否则条款更新后用户不会再次看到新弹窗。
移动端适配容易漏掉滚动穿透和键盘聚焦
弹窗打开时，背后页面还能滚动？这是典型滚动穿透问题。解决方案很简单：弹窗显示时给 <body> 加 style="overflow: hidden"，关闭时移除。但更关键的是键盘交互：
用户按 Tab 键时，焦点必须限制在弹窗内（防止跳到背后按钮）。手动实现需监听 keydown，检测 Tab 键并控制焦点循环；但更推荐直接用 dialog.showModal() —— 它原生支持焦点锁定，且会自动禁用背景滚动。
最后检查 iPhone 上是否能正常唤起软键盘输入（如果弹窗里有表单），以及 Safari 的 position: fixed 在某些 iOS 版本下错位问题——此时改用 position: absolute + top: 50%; left: 50%; transform: translate(-50%, -50%) 更稳。
弹窗的“简洁”不在于删减文字，而在于交互路径干净、状态可追溯、边界情况有兜底。法律文本本身没法压缩，但用户从点击到确认的每一步，必须零歧义、零意外、零二次弹出。
