dialog标签默认不显示且不渲染，需调用showModal()激活模态行为；仅设open属性仅可见但无模态功能；关闭需手动监听点击或Esc；表单提交要防刷新；样式、居中、焦点均需自行处理。
dialog 标签不会自动显示，写了就以为能弹出来——这是最常踩的坑。它默认 display: none 且不参与渲染，必须调用 showModal() 才真正激活模态行为。
为什么写了 dialog 却完全看不到？
不是 CSS 没写对，是根本没“启动”它。原生 <dialog></dialog> 在 DOM 中存在，但浏览器跳过布局和绘制，连 getBoundingClientRect() 都返回空值。
- 仅加
open属性（如<dialog open>）可初始显示，但不启用 backdrop、不锁焦点、不响应 Esc —— 它只是“可见”，不是“模态” - 必须在 DOM 加载完成后调用
dialog.showModal()，否则报Cannot read property 'showModal' of null - 别用
dialog.style.display = 'block'或dialog.hidden = false，这会绕过原生焦点管理，Tab 键直接穿透出去
点击遮罩层（backdrop）为什么不关闭？
这不是 bug，是规范明确不支持自动关闭。showModal() 创建的 ::backdrop 默认不可点击，也不冒泡事件到 dialog 元素本身。
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在兼容问题：点击 backdrop 时
e.target可能始终是<body>，需 fallback 到坐标判断（如e.clientX < dialog.getBoundingClientRect().left） - 别给
dialog设pointer-events: none，这会让showModal()的焦点锁定彻底失效
form 提交后页面刷新，dialog 消失？
因为 <form> 在 <dialog> 内仍按默认行为提交，触发整个页面 reload —— dialog.close() 根本没机会执行。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 最简方案：给
form加method="dialog"属性，提交后自动关闭并设置dialog.returnValue，不刷新页面 - 需要异步处理（如
fetch）时，必须在submit事件中调用e.preventDefault()，再手动调用dialog.close() - 别把关闭逻辑写在按钮的
onclick里，要绑定到form的submit事件，否则用户回车提交会漏掉
样式、居中、焦点都难看？这些全得自己补
dialog 没有统一默认样式，Chrome 圆角白底带阴影，Firefox 是透明块，Safari 甚至默认不居中；焦点也只尝试聚焦第一个可聚焦子元素，失败就静默。
- 居中靠浏览器内置逻辑，但前提是
dialog直接挂载在<body>下，嵌套在<div style="position: relative">或<form>里会破坏它 - 用
dialog::backdrop控制遮罩层（如background: rgba(0,0,0,0.5)），但 Safari 对该伪元素支持不全，必要时加一层<div class="backdrop">模拟 - 确保内部第一个可聚焦元素存在且可用（如
<button autofocus>），否则键盘 Tab 会跳出对话框；标题建议用<h3 id="title">+aria-labelledby="title"
最容易被忽略的是：它不处理任何交互逻辑，只提供语义容器和两个方法。点遮罩关、Esc 关、表单关、焦点锁——全得你一行行写，而不是“用了就完事”。
