HTML5 标签默认隐藏且需JavaScript控制：show() 非模态，showModal() 模态并支持 ::backdrop（Chrome/Edge 111+、Safari 17.4+），Firefox不渲染遮罩；必须监听 close 事件统一处理关闭逻辑，表单提交会自动关闭，建议用 JS 控制流程以保障兼容性。
HTML5 原生
很多人以为写上 就会自动弹出来，其实不会。 默认是隐藏的（display: none），且没有内置“点击打开”逻辑。它本质是个语义化容器，行为完全依赖 JS 控制。
常见错误现象：
页面加载后完全看不到，控制台也无报错——因为没调用show() 或 showModal()。
-
show()：显示对话框，但不阻塞背景交互（用户还能点按钮、滚动页面） -
showModal()：模态显示，背景变灰、键盘焦点锁入 dialog、Esc 可关闭（推荐日常使用） -
close()：手动关闭，需传参触发close事件（如dialog.close('cancel')）
原生 的模态遮罩（backdrop）在 Chrome/Edge 111+ 和 Safari 17.4+ 才支持，且默认样式极简：灰色半透明，无动画、无 z-index 控制。Firefox 目前完全不支持 backdrop 渲染（仅支持 showModal() 的逻辑阻塞）。
要保证跨浏览器视觉一致，得自己补 CSS：
立即学习“前端免费学习笔记（深入）”；
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
animation: fade-in 0.2s;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
注意：::backdrop 伪元素只对 showModal() 生效；show() 不触发 backdrop。
关闭逻辑必须监听 close 事件，不能只靠
用户可能通过 Esc 键、点击 backdrop（如果支持）、或调用 dialog.close() 关闭。只绑 DOM 点击事件会漏掉前两种情况。
正确做法是统一监听 close 事件：
const dialog = document.querySelector('dialog');
dialog.addEventListener('close', () => {
console.log('关闭原因：', dialog.returnValue); // 'cancel' / 'confirm' / ''
});
// 打开时可设 returnValue，比如：
document.getElementById('confirm-btn').onclick = () => dialog.close('confirm');
容易踩的坑：dialog.returnValue 在未显式调用 close('xxx') 时为 ''（空字符串），不是 undefined；用 == null 判断会误判。
表单提交 inside
如果 内有 且含 ，提交后 dialog 会自动关闭（这是规范行为）。但表单验证失败时，你可能想保持打开并聚焦错误字段。
关键点：
- 用
event.preventDefault()阻止默认提交和自动关闭 - 验证通过后再手动
dialog.close('success') - 别忘了给 form 加
method="dialog"—— 这能让 submit 按钮直接设置returnValue并关闭，无需 JS（但无法拦截验证）
所以实际项目中，更稳妥的是统一用 JS 控制表单流程，而不是依赖 method="dialog"。
真正麻烦的不是怎么写，而是 backdrop 兼容性、关闭事件的多入口处理、以及表单与自动关闭的耦合。这些细节不提前理清，上线后容易在 Safari 或旧 Chrome 里突然失效。
