必须调用showmodal()才能显示并激活模态行为，直接写默认隐藏；showmodal()禁背景、锁焦点、支持esc和点击遮罩关闭，而show()仅为非模态浮层。
用 dialog 实现原生弹窗，但必须调用 showModal()
直接写 <dialog></dialog> 不会显示任何东西——它默认隐藏，且不响应 click 或 CSS display。必须用 JavaScript 调用 showModal() 才能激活模态行为（禁背景、锁焦点、支持 Esc、点击 backdrop 关闭）。show() 是非模态的，背景仍可操作，别误用。
常见错误现象：dialog.open = true 看似生效，但 backdrop 不渲染、Esc 无效、焦点没锁定；或 DOM 尚未加载就调用 showModal()，报错 Cannot read property 'showModal' of null。
实操建议：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 确保
<dialog></dialog>是的直接子元素，否则 backdrop 可能不出现 - 检测兼容性：
if ('showModal' in HTMLDialogElement.prototype)，不支持时降级为div方案 - 打开后立即聚焦第一个可交互元素：
dialog.querySelector('button, input, [href]')?.focus() - 监听
close事件做清理，比如重置表单、释放资源
点击遮罩关闭弹窗时，e.target === dialog 才安全
很多人给 dialog 绑定 click 事件后直接调用 close()，结果一点弹窗内容就关了——因为事件冒泡到父级 dialog 元素上。原生 dialog 的 backdrop 不是独立 DOM 节点，而是伪层，点击 backdrop 时 e.target 恰好是 dialog 元素本身；点击内部内容时，e.target 是按钮或文本节点。
实操建议：
- 写成
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - 别用
dialog.onclick = dialog.close，它无法区分点击目标 - 如果想禁用 backdrop 关闭（比如确认弹窗强制用户点按钮），不要阻止事件，而是移除该监听——否则会同时破坏 Esc 关闭和屏幕阅读器逻辑
阻止背景滚动但保留弹窗内滚动，别只设 overflow: hidden
给 body 加 overflow: hidden 确实能停掉背景滚动，但也会让弹窗里长内容无法滚动——因为 overflow 是继承/影响后代的，而弹窗是 fixed 定位，本不该受此限制，但某些移动端 Safari 会误判。
更稳妥的做法是：打开弹窗前记录 document.body.scrollTop，然后设 body { position: fixed; top: -scrollTop } ；关闭时恢复 position: static 并重置 scrollTop。不过对多数项目，简单方案更实用：
- 只对
body设overflow: hidden - 给弹窗容器（如
<div class="modal-content">）设 <code>max-height: 80vh和overflow-y: auto - 移动端加
touch-action: none到遮罩层，防拖拽穿透 - 遮罩层用
width: 100%; height: 100%，但没设position: fixed，导致随页面滚动偏移 - 弹窗内容区用了
width: 100%，在窄屏下撑破视口，应改用max-width: 90vw - 忘记给弹窗设
z-index，被导航栏、广告位等盖住，建议统一用z-index: 1001（遮罩层1000） - 没处理 Tab 键焦点循环：打开后需手动聚焦，关闭前需把焦点还给触发按钮（存个
data-dialog-trigger属性）
自定义 div 弹窗时，transform: translate(-50%, -50%) 居中比 margin: auto 可靠
margin: auto 在 position: fixed 下只对块级元素水平居中有效，垂直方向常失效；而 top: 50%; left: 50%; transform: translate(-50%, -50%) 锚定视口，稳定居中，且不受父容器 transform、overflow 或 flex 布局干扰。
容易踩的坑：
真正难的不是让弹窗“出现”，而是让它在各种尺寸、输入方式、辅助技术下都“不打断用户”。比如 Safari 旧版对 dialog::backdrop 支持不全，安卓 WebView 可能忽略 inert，而屏幕阅读器依赖 aria-modal="true" 和正确的焦点流——这些细节不验证，上线后就会在某个用户身上崩掉。
