HTML实现dialog模态框教程

• 想初始就打开？加 open 属性：
  （但多数场景不该这么做）
• 靠 JS 控制？必须调用 dialog.showModal()（模态）或 dialog.show()（非模态）
• 别用 dialog.hidden = true/false 或 dialog.style.display —— 这会绕过原生焦点和 backdrop 逻辑，导致 Tab 键失效、Esc 不响应
• Safari 15.4+ 才支持 showModal()；旧版 Safari、IE 完全不识别该元素

点击遮罩层（backdrop）为什么不关闭？

这是规范行为，不是 bug。showModal() 创建的 ::backdrop 默认不可点击，浏览器不会自动绑定关闭逻辑。

• 正确监听方式：dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); });
• 注意：Safari 15.4–16.3 存在兼容性问题，e.target 在 backdrop 上可能始终是 ，需 fallback 到坐标判断（如 e.clientX < dialog.getBoundingClientRect().left）
• 别给 dialog 设 pointer-events: none —— 这会让 showModal() 的焦点锁定彻底失效
• 如果不想点 backdrop 关闭，直接加 oncancel="event.preventDefault()" 即可

表单提交后 dialog 没关？

因为