<dialog>: Phần tử Hộp thoại

Phần tử HTML <dialog> đại diện cho một hộp thoại hoặc một component tương tác được, chẳng hạn như giao diện cửa sổ hoặc khảo sát.

Thuộc tính

Phần tử này có các thuộc tính chung. Thuộc tính tabindex không được phép sử dụng với phần tử <dialog>.

open

Cho biết hộp thoại có được kích hoạt và sẵn sàng tương tác hay không. Khi thuộc tính open này không được bật (không có trong thẻ), hộp thoại sẽ không hiện ra cho người dùng.

Lưu ý khi sử dụng

• Phần tử <form> có thể được tính hợp với dialog bằng cách thêm thuộc tính method="dialog" tại <form> bên trong. Khi form được gửi đi, hộp thoại sẽ đóng lại với returnValue là giá trị value của nút submit được bấm.
• CSS pseudo-element ::backdrop là một phần tử giả phía sau hộp thoại dùng để che đi hoặc làm mờ nội dung bên dưới khi mà hộp thoại đang hiện ra. Backdrop chỉ được hiển thị khi phần tử dialog được hiện với dialog.showModal().

Ví dụ

Ví dụ đơn giản

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

Ví dụ nâng cao

Trong ví dụ này, một hộp thoại sẽ hiện ra với một form bên trong khi mà nút "Update details" được bấm.

HTML

<!-- Simple pop-up dialog box containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p><label>Favorite animal:
      <select>
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </label></p>
    <menu>
      <button>Cancel</button>
      <button>Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

JavaScript

(function() {
  var updateButton = document.getElementById('updateDetails');
  var favDialog = document.getElementById('favDialog');

  // “Update details” button opens the <dialog> modally
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
  });
})();

Kết quả nhận được

Nút submit nào được bấm có thể được xác định với returnValue của favDialog.

Đặc tả

Trình duyệt hỗ trợ

Polyfill

Dùng polyfill sau để hỗ trợ <dialog> cho các trình duyệt cũ:

dialog-polyfill

Xem thêm

• Sự kiện close
• Sự kiện cancel
• Hướng dẫn HTML form.