HTMLElement: phương thức showPopover()

Cú pháp

showPopover()
showPopover(options)

Tham số

options Optional

Một đối tượng có thể chứa các thuộc tính sau:

source Optional

Tham chiếu HTMLElement; xác định theo chương trình trình gọi của popover liên kết với hành động hiển thị, nghĩa là phần tử điều khiển của nó. Thiết lập mối quan hệ giữa popover và trình gọi bằng tùy chọn source có hai hiệu ứng hữu ích:

• Trình duyệt đặt popover ở một vị trí hợp lý trong thứ tự điều hướng tiêu điểm bàn phím khi hiển thị. Điều này làm cho popover dễ tiếp cận hơn với người dùng bàn phím (xem thêm Các tính năng tiếp cận của Popover).
• Trình duyệt tạo tham chiếu neo ngầm giữa hai phần tử, giúp định vị popover tương đối với các điều khiển bằng định vị neo CSS trở nên rất tiện lợi. Xem Định vị neo Popover để biết thêm chi tiết.

Giá trị trả về

Không có (undefined).

Ngoại lệ

InvalidStateError DOMException

Được ném ra nếu popover đang hiển thị.

Ví dụ

Ví dụ sau cung cấp chức năng hiển thị popover bằng cách nhấn một phím cụ thể trên bàn phím.

Đầu tiên, một số HTML:

<div id="mypopover" popover>
  <h2>Help!</h2>

  <p>You can use the following commands to control the app</p>

  <ul>
    <li>Press <ins>C</ins> to order cheese</li>
    <li>Press <ins>T</ins> to order tofu</li>
    <li>Press <ins>B</ins> to order bacon</li>
  </ul>
  <hr />
  <ul>
    <li>Say "Service" to summon the robot waiter to take your order</li>
    <li>Say "Escape" to engage the ejector seat</li>
  </ul>
</div>

Và bây giờ là JavaScript để kết nối chức năng:

const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.showPopover();
  }
});

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• API Popover