dialog submit后不自动关闭是正常行为，因其无内置提交关闭逻辑，需手动监听submit事件、preventdefault并调用close()，且须确保已调用showmodal()。
dialog 标签 submit 后不自动关闭是正常行为
HTML <dialog></dialog> 本身没有“提交即关闭”的内置逻辑——它只是个容器，submit 事件不会触发 close()，除非你显式调用。很多开发者卡在这一步，以为表单提交会像模态框插件一样自动收起，结果点完按钮 dialog 还在，页面还卡着。
关键在于：必须手动监听表单提交、阻止默认行为、执行 dialog.close()，再决定是否提交数据（比如用 fetch）或让表单自然提交（此时需额外处理页面跳转/重载导致的 dialog 状态丢失）。
用 JavaScript 拦截 form submit 并关闭 dialog
这是最可控的方式，适用于 AJAX 提交或需要校验后再关闭的场景。注意别漏掉 event.preventDefault()，否则页面会刷新，dialog 状态直接失效。
-
dialog必须已调用showModal()（而非show()），否则close()无效 - 表单需在
<dialog></dialog>内部，且绑定submit事件（推荐用事件委托或直接 onsubmit） - 关闭后若需反馈，建议在
close事件监听中处理，而不是 submit 回调里——因为close()是同步的，但视觉消失有微小延迟
<dialog id="myDialog"><form id="myForm">
<input name="username" required><button type="submit">确定</button>
</form>
</dialog><script>
const dialog = document.getElementById('myDialog');
const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
e.preventDefault(); // 必须加
const data = new FormData(form);
// 示例：AJAX 提交
fetch('/api/save', { method: 'POST', body: data })
.then(() => dialog.close()) // 成功后关闭
.catch(err => console.error(err));
});
</script>
dialog 关闭后表单数据没清空？记得重置
关闭 <dialog></dialog> 不等于重置内部表单——dialog.close() 只隐藏元素，input 值依然保留在 DOM 中。下次再 showModal()，用户会看到上次填的内容，容易引发误操作或隐私问题。
- 推荐在
dialog.close()后立即调用form.reset() - 如果用了
show()（非模态），还要手动移除open属性，否则下次showModal()可能不触发 backdrop - 不要依赖
dialog.addEventListener('close', ...)来 reset 表单——这个事件在用户按 Esc 或点击 backdrop 时也会触发，可能误清空未提交内容
稳妥做法是在每次成功提交后重置：
fetch('/api/save', { method: 'POST', body: data })
.then(() => {
dialog.close();
form.reset(); // 主动清空
});
兼容性与 Safari 的特殊坑
<dialog></dialog> 在 Safari 15.4+ 才支持 showModal()，旧版 Safari 会忽略该标签（降级为普通 div）。更隐蔽的问题是：Safari 目前不支持在 dialog 内使用 <input type="file"> 的文件选择弹窗——点击无反应，控制台也无报错。
- 检测支持：用
typeof HTMLDialogElement !== 'undefined'，不支持时可 fallback 到div + position: fixed - Safari 下若发现 submit 后 dialog 没反应，先检查是否误用了
show()（它不阻塞页面交互，用户可能点到背后按钮） - 所有
dialog相关方法（showModal、close、open属性）都必须在用户手势（如 click）回调中调用，否则 Chrome/Safari 会静默失败
真实项目里，别只测 Chrome；Safari 对 <dialog></dialog> 的实现细节差异，往往要到上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
