HTMLDialogElement: phương thức show()
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.
Phương thức show() của giao diện HTMLDialogElement hiển thị hộp thoại dưới dạng hộp thoại không modal.
Một hộp thoại không modal là hộp thoại cho phép người dùng tương tác với nội dung bên ngoài/phía sau hộp thoại đang mở.
Cú pháp
show()
Tham số
Không có.
Giá trị trả về
Không có (undefined).
Ngoại lệ
InvalidStateErrorDOMException-
Được ném ra nếu hộp thoại đã mở và ở chế độ modal (tức là, nếu hộp thoại đã được mở bằng
HTMLDialogElement.showModal()).
Ví dụ
Cách sử dụng cơ bản
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> bằng phương thức show().
Khi hộp thoại đang mở, bạn vẫn có thể tương tác với phần còn lại của trang, bao gồm cả việc nhấp vào nút Nhấp vào tôi để kích hoạt một cảnh báo.
Bạn có thể nhấp vào nút Đóng hộp thoại để đóng hộp thoại (thông qua phương thức close()).
HTML
<dialog id="dialog">
<button type="button" id="close">Đóng hộp thoại</button>
</dialog>
<p><button id="open">Mở hộp thoại</button></p>
<p><button id="alert">Kích hoạt cảnh báo</button></p>
JavaScript
const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
const alertButton = document.getElementById("alert");
// Nút mở mở một hộp thoại modeless
openButton.addEventListener("click", () => {
dialog.show();
});
// Nút cảnh báo kích hoạt một cảnh báo
alertButton.addEventListener("click", () => {
alert("bạn đã nhấp vào tôi!");
});
// Nút đóng đóng hộp thoại
closeButton.addEventListener("click", () => {
dialog.close();
});
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-dialog-show-dev |
Tương thích trình duyệt
Xem thêm
- Phần tử HTML
<dialog> HTMLDialogElement.showModal()