为什么它更好#

手写模态框绕不开三个坑：焦点会跑到页面背后、Esc 关不掉、z-index 层层加码还是被浮层盖住。<dialog> 把三个问题全部内建解决：

• showModal() 打开后焦点圈定在对话框内，Tab 键出不去
• Esc 自动触发 close 事件
• 渲染在 top layer，永远盖在普通层叠上下文之上，不用管 z-index

基本用法#

1
<dialog id="confirm">
2
  <p>确认删除这条记录？</p>
3
  <form method="dialog">
4
    <button value="cancel">取消</button>
5
    <button value="ok">删除</button>
6
  </form>
7
</dialog>

1
const dlg = document.querySelector('#confirm');
2
dlg.showModal();
3
dlg.addEventListener('close', () => {
4
  if (dlg.returnValue === 'ok') doDelete();
5
});

form method="dialog" 会自动关闭对话框并把按钮的 value 塞进 returnValue，连事件监听都省了。

样式#

遮罩用 ::backdrop 伪元素：

1
dialog::backdrop {
2
  background: rgb(0 0 0 / 40%);
3
  backdrop-filter: blur(2px);
4
}

打开时有默认的居中定位，可以用 margin: auto 微调。出场动画建议用 transition 配合 allow-discrete，比 JS 控制 class 干净得多。

唯一要注意的：show() 和 showModal() 是两种东西，前者是普通 inline 弹层，没有遮罩也不圈定焦点，别调混了。