原生 <dialog> 元素需调用 showModal() 或 show() 才显示，支持 backdrop、焦点捕获与 Esc 关闭；关闭后 open 变为 false 但元素仍在 DOM 中，close 事件不区分关闭原因，returnValue 仅在 formmethod="dialog" 按钮提交时自动赋值；兼容性需 polyfill 降级，CSS 中 backdrop 不应设 z-index。
用 <dialog> 元素创建可编程模态框
HTML 原生 <dialog> 是唯一真正支持「运行时模态交互」的内置组件，它自带 backdrop、焦点捕获、Esc 关闭和 showModal() 阻塞式调用。但注意：它默认不渲染在顶层（需手动 showModal()），且不自动居中——必须配合 CSS 设置 margin: auto 或 place-items: center 才能视觉居中。
常见错误是直接写 <dialog>...</dialog> 后就期望它弹出，结果页面里完全看不到——因为它的 display 初始为 none，必须显式调用方法激活。
- 必须用 JavaScript 调用
dialogElement.showModal()或dialogElement.show()才会显示 -
showModal()会禁用背景交互并加半透明 backdrop；show()不禁用背景，适合轻量提示 - 关闭方式有三种：调用
dialogElement.close()、点击 backdrop（仅showModal()有效）、按 Esc 键 - 关闭后 dialog 仍保留在 DOM 中，只是
open属性变为false，可复用
处理 close 事件与用户操作反馈
<dialog> 的核心交互逻辑围绕 close 事件展开，但它**不区分关闭原因**（Esc、backdrop 点击、close() 调用都触发同一事件）。若需区分用户意图，得靠按钮的 value 或自定义属性传递上下文。
例如：在对话框内放两个按钮，一个 <button value="confirm">确定</button>，一个 <button value="cancel">取消</button>，然后在 close 事件里读取 dialog.returnValue——但注意：returnValue **只在通过按钮的 formmethod="dialog" 提交时才被自动赋值**，普通点击不会设置它。
立即学习“前端免费学习笔记（深入）”；
- 可靠做法：监听按钮点击，先
dialog.close(button.value)，再在close事件中读取dialog.returnValue - 避免直接在按钮上写
onclick="dialog.close('confirm')"，应统一用事件委托或绑定 - 若需异步确认（如提交前校验），不能依赖
showModal()的同步阻塞——它只阻塞渲染流，不阻塞 JS 执行，得用await+ Promise 封装
兼容性与降级必须手动处理
<dialog> 在 Safari 15.4+ 和 Chrome 37+ 支持良好，但 Firefox 直到 98 版本才支持 showModal()，旧版需 polyfill 或降级。最简降级方案不是隐藏元素，而是用 display: block + position: fixed 模拟，但焦点管理、backdrop 遮罩、Esc 响应都得手写。
检测是否原生支持：typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype。不满足时，建议用轻量库（如 dialog-polyfill）而非从零实现——它已处理了焦点环修复、iOS Safari 滚动穿透等棘手问题。
- polyfill 会把
<dialog>渲染为<div role="dialog">，并注入 backdrop 元素 - 务必在
<head>中引入 polyfill 并调用dialogPolyfill.registerDialog()，否则动态创建的 dialog 不会被接管 - CSS 中不要给
dialog::backdrop设z-index，原生实现中 backdrop 总在 dialog 下方且层级固定
与表单提交结合时的陷阱
当 <dialog> 内含 <form>，且按钮设 formmethod="dialog"，点击会自动调用 dialog.close() 并将按钮 value 赋给 dialog.returnValue。这是最简洁的「确认/取消」模式，但极易踩坑：
- 按钮必须在
<form>内，且formmethod="dialog"才生效；type="submit"不够 - 如果 form 有
action，且没加formmethod="dialog"，点击会直接提交表单，跳转或刷新页面 -
dialog.returnValue是字符串类型，即使按钮value="true"，取出来也是"true"，别直接当布尔用 - 不要在
form上监听submit事件来阻止默认行为——这会让formmethod="dialog"失效
复杂交互（比如「确定」要发 API 请求）不适合用 formmethod="dialog"，应改用按钮点击 + 手动 close() + 异步处理，否则用户点了没反应会误以为卡死。
