原生 dialog 元素如何工作？

Question

原生 dialog 元素如何工作？

Accepted Answer

`<dialog>` 是用于**模态框和对话框**的原生元素。它处理焦点捕获、背景层、顶层、以及 Escape 键关闭功能——这些功能否则你需要用大量 JavaScript 和 ARIA 手动实现。

```html
<dialog id="myModal">
  <form method="dialog">           
    <h2>Confirm</h2>
    <p>Are you sure?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
```

## 在 JS 中打开和关闭

```js
const modal = document.getElementById("myModal");

modal.showModal(); // opens as a MODAL: backdrop + focus trapped + Esc closes
modal.show();      // opens as a NON-modal (no backdrop, page stays interactive)
modal.close("ok"); // closes, sets returnValue

modal.addEventListener("close", () => {
  console.log(modal.returnValue); // "ok" or "cancel" — from the button's value
});
```

## 使用 showModal() 免费获得的功能

- **焦点捕获** — 对话框打开时，Tab 键保持在对话框内。
- **背景层** — 可通过 `::backdrop` 自定义样式，点击外部可被检测。
- **顶层** — 无论 `z-index` 是多少，都渲染在所有内容上方。
- **Escape 键关闭它**。
- **表单上的 `method="dialog"`** 关闭对话框并记录哪个按钮被提交。

## 设置背景层样式

```css
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog { border: none; border-radius: 8px; padding: 2rem; }
```

## 为什么这很重要

在 `<dialog>` 出现之前，可访问的模态框需要手动焦点管理、ARIA 角色、滚动锁定和 Escape 键处理——这是 bug 的常见来源。

原生元素能够开箱即用地正确提供所有这些功能。

对于真正的模态框，使用 `showModal()`；这是现代的、可访问的对话框默认方案。