dialog元素默认隐藏，需用JavaScript的show()或showModal()方法显示；推荐showModal()以获得遮罩、禁用底层交互等特性；注意兼容性及关闭后状态重置。
dialog 元素必须配合 JavaScript 才能显示
dialog 标签本身是隐藏的，即使写在 HTML 里也不会自动弹出。浏览器默认给它加了 display: none，所以光写 <dialog><p>内容</p></dialog> 是看不见的。必须调用它的 show() 或 showModal() 方法。
常见错误：只写 HTML、不写 JS，或者写了但没等 DOM 加载完就调用方法，结果报错 Cannot read property 'showModal' of null。
- 确保
dialog元素已存在于 DOM 中（比如放在<body>底部，或通过document.createElement创建后 append） - 在
DOMContentLoaded事件后操作，或把脚本放在</body>前 - 推荐用
showModal()——它会自动加背景遮罩、禁用底层交互、支持 Esc 关闭和点击 backdrop 关闭（show()不具备这些）
按钮点击触发 dialog 的标准写法
绑定事件最直接的方式是给按钮加 onclick，或用 addEventListener。关键是要拿到 dialog 元素引用。
示例：
立即学习“前端免费学习笔记（深入）”；
<button id="openBtn">打开弹窗</button>
<dialog id="myDialog">
<p>这是弹窗内容</p>
<button id="closeBtn">关闭</button>
</dialog>
<script>
const dialog = document.getElementById('myDialog');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');
openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());
</script>
注意：close() 方法会触发 close 事件，但不会触发 cancel 事件；而用户按 Esc 或点遮罩层关闭时，触发的是 cancel 事件——这点影响后续逻辑判断。
dialog 不兼容旧版 Safari 和 IE，需要 fallback
目前（2024 年中），Safari 15.4+ 支持 dialog，但 iOS Safari 15.4–16.3 有严重 bug：遮罩层不响应点击、无法关闭。IE 完全不支持。
如果项目需兼容这些环境，不能只依赖原生 dialog：
- 用
if ('showModal' in HTMLDialogElement.prototype)检测支持性 - 不支持时，降级为
position: fixed+ 手动管理aria-modal、焦点锁定、Esc 监听等 - 不要用 polyfill（如
dialog-polyfill），它在现代浏览器中反而引入样式冲突和事件异常
关闭后 dialog 仍保留在 DOM，内容不会自动清空
dialog.close() 或 dialog.close('value') 只是隐藏并触发事件，元素还在页面里，内部表单、输入框状态都保留着。下次再 showModal()，会显示上次关闭前的内容。
如果你每次打开都需要干净状态，得手动重置：
- 表单：调用
form.reset() - 输入框：设
input.value = ''或textarea.value = '' - 可监听
close或cancel事件来做清理
例如：dialog.addEventListener('close', () => form.reset());
这个细节容易被忽略，尤其在弹窗含搜索框、富文本编辑器等复杂组件时，残留状态会引发意料外的行为。
