dialog 元素调用 showModal() 前必须已插入 DOM，否则报错；该方法阻塞交互但不阻塞 JS，需监听 close 事件获取关闭时机；dialog 无默认遮罩和居中，须手动设置 position: fixed 和 dialog::backdrop 样式；Safari 支持不完整，需降级处理。
dialog 元素调用 showModal() 前必须插入 DOM
直接创建 <dialog> 元素后立刻调用 showModal() 会报错：Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a document. 浏览器要求该元素已挂载到文档中（哪怕 display: none 或 position: absolute 也没关系），否则方法无效。
实操建议：
- 把
<dialog>写在 HTML 文件的<body>内（不推荐放<head>或未挂载的 Fragment 中） - 若用 JS 动态创建，务必先
document.body.appendChild(dialog)再调用showModal() - 不要依赖 CSS 隐藏来“提前准备”，
display: none不影响showModal()调用，但没插入 DOM 就不行
showModal() 会阻塞页面交互，但不阻塞 JS 执行
调用 showModal() 后，用户无法点击背景、Tab 键不会离开 dialog、ESC 默认关闭——这是浏览器原生模态行为。但它不会像 alert() 那样暂停 JS 线程，后续代码会立即执行。
常见错误现象：调用 showModal() 后立刻读取 dialog.open，值仍是 false（因为状态更新是异步的，且发生在渲染阶段）；或误以为能用 await 等待用户关闭。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 监听
close事件获取关闭时机：dialog.addEventListener('close', () => { console.log('closed:', dialog.returnValue); }) - 关闭后
dialog.open才变为false，别在showModal()后立刻检查 - 如需“同步等待”，得自己封装 Promise + 事件监听，不能靠方法返回值
dialog 默认无样式，必须手动加 position: fixed 和遮罩
<dialog> 元素本身不带 backdrop（半透明遮罩），也不自动居中，浏览器只提供基础模态逻辑。Chrome/Edge 有默认 backdrop-filter 和简单阴影，但 Safari 目前（截至 v17.4）完全不支持 backdrop，且所有浏览器都不自动加背景蒙层。
实操建议：
- 给
dialog::backdrop加样式才能显示遮罩：dialog::backdrop { background: rgba(0,0,0,0.5); } - dialog 本体需至少设置
position: fixed+top/left定位，否则可能出现在顶部左上角或流式布局里 - Safari 用户看到的是无遮罩、无居中的弹层，必须用 JS 检测并 fallback（比如用
dialog.showModal ? show : fallbackModal()）
关闭 dialog 的三种方式及 returnValue 差异
用户可通过 ESC、点击 backdrop、或调用 close() 关闭 dialog。但只有 close('value') 和表单内 <button formmethod="dialog" value="xxx"> 会设置 dialog.returnValue；ESC 和 backdrop 点击均设为空字符串。
实操建议：
- 用
dialog.close('confirm')显式传值，比依赖按钮 value 更可控 - 表单提交时若用
<button type="submit">，记得加formmethod="dialog"，否则会触发表单提交而非关闭 - 关闭后立即读
dialog.returnValue，它不会被重置，但下次showModal()前可手动清空
dialog 的支持仍不完整，尤其是 backdrop 和部分事件细节；如果项目需兼容旧版 Safari 或 iOS，别只靠原生 showModal() —— 得预埋降级逻辑，而且这个降级不是加几行 CSS 就能解决的。 
