เอเลเมนต์ dialog แบบเนทีฟทำงานอย่างไร?

Question

IT Interview Practice · Accepted Answer

`<dialog>` คือเอเลเมนต์เนทีฟสำหรับ **modal และ dialog** โดยจัดการเรื่อง focus trapping, backdrop, top layer และการกด 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()

- **Focus trapping** — Tab จะวนอยู่ภายใน dialog ขณะที่เปิดอยู่
- **Backdrop** — กำหนดสไตล์ได้ผ่าน `::backdrop` และตรวจจับการคลิกด้านนอกได้
- **Top layer** — เรนเดอร์อยู่เหนือทุกอย่างโดยไม่ขึ้นกับ `z-index`
- **ปุ่ม Escape** ปิด dialog ได้
- **`method="dialog"`** บนฟอร์มจะปิด dialog และบันทึกว่าปุ่มใดเป็นตัว submit

## การกำหนดสไตล์ให้ backdrop

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

## ทำไมจึงสำคัญ

ก่อนที่จะมี `<dialog>` การทำ modal ที่เข้าถึงได้ต้องอาศัยการจัดการ focus เอง, ARIA roles, การล็อกการ scroll และการจัดการ Escape ซึ่งเป็นแหล่งของบั๊กที่ขึ้นชื่อ

เอเลเมนต์เนทีฟนี้มอบทุกอย่างให้อย่างถูกต้องตั้งแต่แรกเริ่ม

ใช้ `showModal()` สำหรับ modal จริง ๆ ซึ่งเป็นค่าเริ่มต้นที่ทันสมัยและเข้าถึงได้สำหรับ dialog

การเปิดและปิดใน JS

สิ่งที่คุณได้มาฟรีเมื่อใช้ showModal()

การกำหนดสไตล์ให้ backdrop

ทำไมจึงสำคัญ

คำถามที่เกี่ยวข้อง