<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 (en-US) |
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ínhmethod="dialog"
tại<form>
bên trong. Khi form được gửi đi, hộp thoại sẽ đóng lại vớireturnValue
là giá trịvalue
của nút submit được bấm. - CSS pseudo-element
::backdrop
(en-US) 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ớidialog.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ũ:
Xem thêm
- Sự kiện
close
- Sự kiện
cancel
- Hướng dẫn HTML form.