dialog需手动调用showModal()激活、用localStorage持久化用户选择、表单设method="dialog"防刷新，并用polyfill兼容旧浏览器。
dialog 标签本身不自动弹出、不自动记住用户选择、也不处理表单提交逻辑——你得自己补全这三块，否则协议弹窗只是个“摆设”。
dialog 不显示？必须调用 showModal() 且确保 DOM 就绪
写了 <dialog id="agreement-dialog"> 却完全看不到，不是 CSS 问题，是它压根没被激活。原生 dialog 默认不渲染、不占布局、getBoundingClientRect() 返回空值。
- 只加
open属性（如<dialog open>）能让内容可见，但无遮罩、不锁焦点、不响应 Esc，不是真正模态框 - 必须用
dialog.showModal()才触发完整模态行为；show()几乎不用，它不加 backdrop，Tab 键可穿透到背景页 - 脚本执行早于 DOM 加载会报
Cannot read property 'showModal' of null：把 JS 放在</body>前，或包裹在DOMContentLoaded里 - 别手动设
dialog.open = true或dialog.style.display = 'block'，这绕过原生焦点管理，Tab 键直接失效
用户点了“同意”却刷新就重来？必须用 localStorage 持久化
仅靠 JS 变量记一次是无效的——页面刷新后状态丢失。协议确认必须持久化，且不能依赖 sessionStorage（关掉标签页就清空）。
- 检查是否已接受：
localStorage.getItem('agreementAccepted') === 'true'，是则跳过showModal() - 点击“同意”按钮后执行：
localStorage.setItem('agreementAccepted', 'true') - 不要用
cookie或indexedDB，对单次布尔状态而言太重，localStorage足够且兼容性好 - 注意：Safari 的无痕模式可能禁用
localStorage，需 fallback 到内存缓存 + 提示用户手动确认（但协议场景通常允许忽略该边界）
表单提交后页面刷新或弹窗闪退？method="dialog" 是最简解
在 <dialog> 里放 <form> 很常见，但默认提交会整页 reload，看起来像“弹窗闪退”。防刷新不是靠 e.preventDefault() 就完事。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 简单场景：给
form加method="dialog"属性，提交后自动触发dialog.close()，不刷新页面，且设置dialog.returnValue - 需要异步校验（如调用 API 验证用户身份）时，必须监听
submit事件，第一件事就是e.preventDefault()，再手动dialog.close() - 别把关闭逻辑写在按钮的
onclick里——用户按回车提交会漏掉 - 记得重置表单状态：关闭后手动清空
input、恢复按钮文字，否则下次打开还是上次的脏数据
Safari 和旧版浏览器不居中、不响应 Esc、点遮罩不关闭？别硬扛，用运行时检测 + polyfill
dialog 在 Safari 16.4+ 才完整支持 showModal()，iOS 15 及更早 Android Webview 基本不可用。强行手写降级逻辑（焦点管理、Esc 监听、backdrop 模拟）复杂度接近重写一个弹窗库。
- 运行时检测必须用：
typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype；@supports (display: dialog)只能测语法，不能测方法 - 推荐直接引入
dialog-polyfill：它会自动 patch 原生 API，showModal()close()等调用保持一致，不用改业务逻辑 - 若拒绝第三方依赖，至少要补两件事：
keydown监听 Esc 并调用close()；click监听并判断e.target === dialog再关窗（Safari 15.4–16.3 需 fallback 到坐标判断） - 样式重置不能省：
dialog { margin: 0; padding: 1em; border: none; border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90vw; max-height: 90vh; }
最易被忽略的是：协议弹窗不是“显示一次就结束”，它要和用户生命周期绑定——localStorage 存的是用户意愿，不是页面状态；showModal() 启动的是浏览器原生模态栈，不是 CSS 显隐切换；而 Safari 的 backdrop 事件缺失，不是 bug，是规范未定义，得主动兜底。
