最轻量方案是用 dialog 元素，语义清晰、可访问性好，但 Safari 15.4 前不支持；需 fallback 到带 aria-modal 和焦点管理的 div；注意 scroll-behavior、链接安全及法律有效性。
用 dialog 元素最轻量，但注意浏览器兼容性
现代 HTML 原生支持 dialog，不用 JS 也能控制显隐，语义清晰、可访问性好。但它在 Safari 15.4 之前不支持，iOS Safari 直到 16.4 才完整支持。如果你的用户基本用 Chrome/Firefox/Edge，可以直接上；如果必须兼容老 Safari，得 fallback 到 div + 手动控制。
实操建议：
- 用
<dialog id="terms-dialog"></dialog>包协议内容，内部加<button onclick="this.closest('dialog').close()">关闭</button> - 首次进入页面时用
document.getElementById('terms-dialog').showModal()触发弹出（注意：只能由用户交互触发，不能 onload 自动调，否则会被浏览器拦截） - 点击背景或按 Esc 会自动关闭，无需额外监听 —— 这是原生行为，别覆盖掉
- 样式上必须手动加
dialog::backdrop { background: rgba(0,0,0,0.5); }，否则背景透明不可见
用 div 模拟弹层时，aria-modal 和焦点管理不能省
当 fallback 到 div 时，光靠 display: none/block 不够。屏幕阅读器不会知道这是模态框，键盘 Tab 仍能跑到背后内容里，用户可能根本看不到协议就提交了。
关键动作：
立即学习“前端免费学习笔记（深入）”；
- 弹出时给弹层加
aria-modal="true"，同时给<body>加inert属性（或用 JS 禁用所有可聚焦元素） - 弹出后立刻用
focus()把焦点移到弹层内第一个可聚焦元素（比如「我已阅读并同意」复选框），否则键盘用户卡在页面顶部 - 按 Esc 关闭时，记得把焦点移回触发按钮（比如「注册」按钮），否则焦点丢失
- 不要只靠
z-index控制层级 —— 若父容器有transform或filter，会创建新层叠上下文，导致弹层被遮挡
scroll-behavior: smooth 会让协议滚动卡顿，要关掉
很多协议很长，需要内部滚动。但如果全局设了 html { scroll-behavior: smooth; }，在 dialog 或弹层 div 里滚动会明显延迟、卡顿，尤其在移动端。
解决方法很简单：
- 给弹层容器单独加
scroll-behavior: auto; - 或者更稳妥：协议内容用
<div class="terms-content">包裹，对这个 class 设scroll-behavior: auto;，避免影响其他区域 - 别依赖
scrollTop动画来「滚动到顶部」—— 弹层打开时直接设scrollTop = 0即可，动画反而干扰阅读节奏
协议文本里嵌链接，target="_blank" 必须配 rel="noopener"
用户协议常含「隐私政策」「服务条款」等跳转链接。如果写成 <a href="/privacy" target="_blank">，新标签页可通过 window.opener 访问原页面，存在安全风险，且部分浏览器（如新版 Safari）会直接阻止跳转。
务必补全：
<a href="/privacy" target="_blank" rel="noopener">隐私政策</a>- 如果还要防止 referrer 泄露，可加
referrerpolicy="no-referrer" - 别用
javascript:void(0)模拟链接 —— 不利于 SEO 和可访问性，也破坏右键菜单
