HTMLDialogElement: thuộc tính open
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Thuộc tính open của giao diện HTMLDialogElement là một giá trị boolean phản ánh thuộc tính HTML open, cho biết <dialog> có sẵn sàng để tương tác hay không.
Giá trị
Một giá trị boolean đại diện cho trạng thái của thuộc tính HTML open. Giá trị true nghĩa là hộp thoại đang hiển thị, trong khi false nghĩa là nó không hiển thị.
Warning:
Mặc dù thuộc tính open về mặt kỹ thuật không phải chỉ đọc và có thể được thiết lập trực tiếp, nhưng việc này bị đặc tả HTML khuyến cáo mạnh mẽ, vì nó có thể phá vỡ các tương tác hộp thoại bình thường theo những cách không mong muốn.
Ví dụ, sự kiện close sẽ không được kích hoạt khi thiết lập open thành false theo cách lập trình, và các lệnh gọi tiếp theo đến các phương thức close() và requestClose() sẽ không có hiệu lực.
Thay vào đó, nên sử dụng các phương thức như show(), showModal(), close(), và requestClose() để thay đổi giá trị của thuộc tính open.
Ví dụ
Mở một hộp thoại
Ví dụ sau đây hiển thị một nút bấm đơn giản, khi được nhấp vào, sẽ mở một <dialog> chứa một biểu mẫu thông qua phương thức showModal().
Từ đó bạn có thể nhấp vào nút Hủy để đóng hộp thoại (thông qua phương thức HTMLDialogElement.close()), hoặc gửi biểu mẫu thông qua nút gửi.
Đoạn mã ghi lại giá trị của open khi trạng thái hộp thoại thay đổi.
HTML
<!-- Hộp thoại pop-up đơn giản -->
<dialog id="dialog">
<form method="dialog">
<button type="submit">Đóng</button>
</form>
</dialog>
<button id="open">Mở hộp thoại</button>
JavaScript
const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
function openCheck(dialog) {
log(dialog.open ? "Hộp thoại: mở" : "Hộp thoại: đóng");
}
openButton.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
dialog.addEventListener("close", () => {
openCheck(dialog);
});
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-dialog-open |
Tương thích trình duyệt
Xem thêm
- Phần tử HTML
<dialog>