Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

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ợ

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 37Edge No support NoFirefox Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support Yes
openChrome Full support 37Edge No support NoFirefox Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Polyfill

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

dialog-polyfill

Xem thêm

Document Tags and Contributors

Những người đóng góp cho trang này: trongthanh
Cập nhật lần cuối bởi: trongthanh,