Cách định nghĩa hộp thoại (dialog) trong HTML?

Thẻ <dialog> (HTML5.2) tạo hộp thoại modal hoặc non-modal. Thuộc tính open hiển thị dialog. JS: showModal() (modal, chặn nền), show() (non-modal), close().

Thuộc tính

Ví dụ cơ bản

<!Doctype html>
<html>
  <head>
    <title>Thẻ dialog HTML</title>
  </head>
  <body>
    <h3>Tutorialspoint</h3>
    <p>Chúng tôi cung cấp hướng dẫn, quiz, video...</p>
    <dialog open>Hướng dẫn miễn phí cho tất cả</dialog>
  </body>
</html>

Ví dụ Modal (khuyên dùng)

<dialog id="myDialog">
  <h3>Xác nhận</h3>
  <p>Bạn có chắc chắn?</p>
  <menu>
    <button value="cancel" autofocus>Hủy</button>
    <button value="confirm" id="confirmBtn">Đồng ý</button>
  </menu>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Mở Dialog</button>
<script>
  document.getElementById('confirmBtn').onclick = () => {
    document.getElementById('myDialog').close('confirmed');
  };
  document.getElementById('myDialog').addEventListener('close', e => {
    console.log('Dialog closed with:', e.target.returnValue);
  });
</script>

Đặc điểm Modal (showModal)

• Tạo backdrop (::backdrop pseudo-element) — có thể style: dialog::backdrop { background: rgba(0,0,0,0.5); }
• Chặn tương tác phần tử khác (inert).
• Esc để đóng (mặc định).
• Trả về giá trị qua returnValue.

Accessibility

• Focus tự động vào dialog khi mở (modal).
• Focus trap bên trong dialog.
• ARIA: role="dialog" ngầm, aria-modal="true" (modal).