dialog元素默认不渲染，必须调用showModal()或show()才能激活；仅设open属性仅初始可见但无遮罩、不锁焦点、不响应Esc；showModal()是唯一推荐的模态打开方式，需确保DOM就绪后调用。
dialog 元素默认不渲染，必须先调用 showModal() 或 show()
写了 <dialog></dialog> 却看不到？不是 CSS 没写对，是它根本没“启动”。<dialog open> 只让内容可见，但无遮罩、不锁焦点、不响应 Esc —— 它只是个浮层，不是模态框。真正激活模态行为，必须用 dialog.showModal()。脚本若在 DOM 加载前执行，会报 Cannot read property 'showModal' of null，所以要么把 <script> 放在 </body> 前，要么包在 DOMContentLoaded 里。
宽高只能靠 CSS 控制，width/height 属性无效
<dialog> 不支持内联 width 或 height 属性，所有尺寸控制必须走 CSS。常见错误是只设 width: 500px，结果小屏设备横向溢出。正确做法是组合使用：
-
max-width（如90vw）防溢出 -
min-width（如320px）保可读性 -
width（如min(600px, 90%)）兼顾弹性与上限 -
max-height+overflow-y: auto防内容撑高失焦
别忘了显式重置 margin：Chrome 默认 margin: 0 auto，Safari 可能不居中，加 margin: 2rem auto 更稳。
移动端适配要靠媒体查询 + min/max-width 组合
纯 width: 80% 在手机上可能过宽，在桌面又太窄。推荐写法：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
dialog {
width: min(90%, 600px);
max-width: 90vw;
margin: 1rem auto;
}
@media (max-width: 768px) {
dialog {
width: 95%;
margin: 0.5rem;
}
}
注意两点：一是避免用 px 固定宽高（如 width: 400px），二是别漏掉 max-height 和 overflow-y，否则长表单在小屏上会切掉底部按钮。
点击 backdrop 关闭需手动监听，且 Safari 有兼容陷阱
::backdrop 不响应点击事件，规范没定义“点背景关窗”，所以必须自己加逻辑：
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
但 Safari 15.4–16.3 中 e.target 常是 body 而非 dialog，得 fallback 判断坐标：
dialog.addEventListener('click', e => {
if (e.target === dialog ||
e.clientX <= dialog.clientLeft ||
e.clientY <= dialog.clientTop ||
e.clientX >= dialog.clientLeft + dialog.clientWidth ||
e.clientY >= dialog.clientTop + dialog.clientHeight) {
dialog.close();
}
});
这个判断逻辑容易被忽略，尤其在测试覆盖不到旧 Safari 版本时，弹窗就变成“只能点按钮关”。
