dialog 是需手动编写 html 并用 javascript 调用 showmodal() 或 show() 才能显示的原生标签，默认隐藏且不响应 visibility/opacity；必须监听 close 事件处理关闭逻辑，注意样式兼容性与焦点管理。
dialog 元素不是“保存为”的产物，它是一段需要手动写入 HTML 文档并配合 JavaScript 控制的原生标签。你无法把任意网页源码“保存成”一个 dialog——它必须是你主动编写的结构 + 显式调用方法才能出现。
dialog 必须调用 showModal() 或 show() 才会显示
- 直接在 HTML 里写
<dialog><p>内容</p></dialog>，页面上什么都不会出现 - 它默认是
display: none，且不响应 CSS 的visibility或opacity - 常见错误：只加了 HTML，没写 JS 触发逻辑，以为“写完就弹”
正确做法：
- 把
dialog放进文档流（比如 body 底部） - 在按钮点击事件里调用：
document.getElementById('myDialog').showModal(); - 或首次加载时用
DOMContentLoaded触发（仅限调试，正式场景慎用）
点击遮罩关闭必须手动监听 close 事件，不是 click
-
showModal()后点击 backdrop、按 Esc、调用close()都会触发close事件 - 但
click事件目标是dialog元素本身（不是伪元素::backdrop），所以不能靠onclick="this.close()"绑在 dialog 上 - 错误写法：
<dialog onclick="this.close()"></dialog>—— Safari 不支持，且语义混乱
推荐写法：
const dlg = document.getElementById('myDialog');
dlg.addEventListener('close', () => {
console.log('对话框已关闭，可在此清理表单或重置状态');
});
注意：这个事件不会在 show() 模式下因点击 backdrop 触发（因为非模态没有 backdrop 行为）
样式重置和兼容性坑比想象中多
- Chrome 默认给
dialog加了margin: 16px，Safari 可能偏移或无圆角，Firefox 居中逻辑不同 -
dialog::backdrop仅支持有限样式：background、opacity，不支持border-radius、transform - Safari 17+ 仍不支持自定义
dialog::backdrop背景色（只能改透明度） - 移动端需加：
max-width: 90vw; max-height: 90vh;，否则可能溢出屏幕
关键 CSS 示例：
dialog {
margin: 0;
padding: 1.25em;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
真正容易被忽略的一点：dialog 的焦点管理是“自动但脆弱”的——一旦你在弹窗内动态插入表单控件（比如 fetch 后渲染的 input），必须手动 focus() 到第一个可聚焦元素，否则 Tab 键会跳到背景页面。这不是 bug，是规范要求你主动接管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
