<dialog> element — native modal โดยไม่ต้อง library

<dialog id="confirm-modal">
  <h2>ยืนยันการลบ?</h2>
  <p>การกระทำนี้ไม่สามารถย้อนกลับได้</p>
  <button id="confirm-btn">ยืนยัน</button>
  <button id="cancel-btn">ยกเลิก</button>
</dialog>

const dialog = document.getElementById('confirm-modal');
document.getElementById('open-btn').addEventListener('click', () => dialog.showModal());
document.getElementById('cancel-btn').addEventListener('click', () => dialog.close());

ข้อดีที่ browser จัดการให้ฟรี:

• Focus trap — Tab วนอยู่แค่ใน modal ไม่หลุดออกมา
• Escape key — กด Esc ปิดได้เลยโดยไม่ต้องเขียน event listener
• ::backdrop — style overlay ด้านหลังได้ผ่าน CSS pseudo-element
• Top layer — ไม่ถูก clip โดย overflow: hidden จาก parent element

browser support ครอบคลุมทั้งหมดแล้ว (Chrome 37+, Firefox 98+, Safari 15.4+)