HTMLDialogElement: phương thức showModal()
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 showModal() của giao diện HTMLDialogElement hiển thị hộp thoại dưới dạng hộp thoại modal, nằm trên cùng của bất kỳ hộp thoại hoặc phần tử nào khác có thể đang hiển thị.
Một hộp thoại modal hiển thị trong top layer, cùng với một phần tử giả ::backdrop.
Các phần tử bên trong cùng tài liệu với hộp thoại, ngoại trừ hộp thoại và các phần tử con cháu của nó, trở nên inert (như thể thuộc tính inert được chỉ định).
Chỉ tài liệu chứa bị chặn; nếu hộp thoại được hiển thị bên trong một iframe, phần còn lại của trang vẫn có thể tương tác.
Cú pháp
showModal()
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à không modal (tức là, nếu hộp thoại đã được mở bằng
HTMLDialogElement.show()).
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 showModal().
Khi hộp thoại đang mở, bạn không 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 mà nếu không sẽ 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 HTMLDialogElement.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 modal
openButton.addEventListener("click", () => {
dialog.showModal();
});
// 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-showmodal-dev |
Tương thích trình duyệt
Xem thêm
- Phần tử HTML
<dialog> HTMLDialogElement.show()