Element dialog native hoạt động như thế nào?

Question

Accepted Answer

`<dialog>` là element native cho **modal và dialog**. Nó xử lý focus trapping, backdrop, top layer, và Escape-để-đóng — những tính năng mà nếu không có nó bạn sẽ phải tự xây bằng nhiều JavaScript và 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>
```

## Mở và đóng trong JS

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

modal.showModal(); // mở dưới dạng MODAL: backdrop + focus bị giữ lại + Esc đóng
modal.show();      // mở dưới dạng NON-modal (không backdrop, trang vẫn tương tác được)
modal.close("ok"); // đóng, đặt returnValue

modal.addEventListener("close", () => {
  console.log(modal.returnValue); // "ok" hoặc "cancel" — từ value của button
});
```

## Những gì bạn nhận được miễn phí với showModal()

- **Focus trapping** — Tab ở lại bên trong dialog khi nó đang mở.
- **Backdrop** — có thể style qua `::backdrop`, và việc click ra ngoài phát hiện được.
- **Top layer** — render trên mọi thứ bất kể `z-index`.
- **Phím Escape** đóng nó.
- **`method="dialog"`** trên một form đóng dialog và ghi lại nút nào đã submit.

## Style cho backdrop

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

## Tại sao điều này quan trọng

Trước khi có `<dialog>`, các modal có accessibility đòi hỏi quản lý focus thủ công, các role ARIA, khóa cuộn, và xử lý Escape — một nguồn lỗi nổi tiếng.

Element native cho bạn tất cả những thứ đó một cách đúng đắn ngay từ đầu.

Dùng `showModal()` cho các modal thực sự; đó là mặc định hiện đại, có accessibility cho dialog.