<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.

Loại nội dung Flow content, sectioning root
Nội dung cho phép Flow content
Thẻ được phép bỏ None, both the starting and ending tag are mandatory.
Thẻ cha cho phép Any element that accepts flow content
ARIA role cho phép alertdialog
Giao diện lập trình DOM HTMLDialogElement

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ả

Đặc tả Trạng thái Ghi chú
HTML Living Standard
The definition of '<dialog>' in that specification.		 Living Standard  
HTML 5.2
The definition of '<dialog>' in that specification.		 Recommendation Định nghĩa ban đầu.

Trình duyệt hỗ trợ

BCD tables only load in the browser

Polyfill

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

dialog-polyfill

Xem thêm