Popover API

Khái niệm và cách sử dụng

Một mẫu rất phổ biến trên web là hiển thị nội dung lên trên các nội dung khác, thu hút sự chú ý của người dùng vào thông tin quan trọng cụ thể hoặc các hành động cần thực hiện. Nội dung này có thể có nhiều tên khác nhau: overlay, popup, popover, dialog, v.v. Chúng tôi sẽ gọi chúng là popover trong tài liệu. Nói chung, chúng có thể là:

• Modal, nghĩa là trong khi một popover đang hiển thị, phần còn lại của trang được hiển thị ở trạng thái không tương tác cho đến khi popover được hành động theo cách nào đó (ví dụ: một lựa chọn quan trọng được thực hiện).
• Non-modal, nghĩa là phần còn lại của trang có thể tương tác trong khi popover đang hiển thị.

Các popover được tạo bằng Popover API luôn là non-modal. Nếu bạn muốn tạo một popover modal, một phần tử <dialog> là cách phù hợp.

Các trường hợp sử dụng điển hình cho popover API bao gồm các phần tử tương tác người dùng như menu hành động, thông báo "toast" tùy chỉnh, gợi ý phần tử form, bộ chọn nội dung hoặc giao diện học tập.

Bạn có thể tạo popover theo nhiều cách:

• Thông qua một tập hợp các thuộc tính HTML mới. Một popover đơn giản với nút chuyển đổi có thể được tạo bằng mã sau:

  html

  <button popovertarget="mypopover">Toggle the popover</button>
  <div id="mypopover" popover>Popover content</div>
  

• Thông qua JavaScript API. Ví dụ, HTMLElement.togglePopover() có thể được sử dụng để chuyển đổi một popover giữa hiển thị và ẩn.

Popover API cũng cung cấp các sự kiện để phản ứng với một popover được chuyển đổi và các tính năng CSS để hỗ trợ tạo kiểu cho popover. Xem Sử dụng Popover API để biết hướng dẫn chi tiết về API.

Thuộc tính HTML

interestfor Experimental

Định nghĩa một phần tử HTML <a>, <button> hoặc <area>, hoặc phần tử SVG <a> như một interest invoker.

popover

Một thuộc tính toàn cục biến một phần tử thành phần tử popover; nhận một trạng thái popover ("auto", "hint" hoặc "manual") làm giá trị.

popovertarget

Biến một phần tử <button> hoặc <input> thành nút kiểm soát popover; nhận ID của phần tử popover cần kiểm soát làm giá trị.

popovertargetaction

Chỉ định hành động được thực hiện ("hide", "show" hoặc "toggle") trên phần tử popover đang được kiểm soát bởi một <button> hoặc <input> kiểm soát.

Tính năng CSS

::backdrop

Pseudo-element ::backdrop là một phần tử toàn màn hình được đặt trực tiếp phía sau các phần tử popover, cho phép thêm hiệu ứng cho nội dung trang phía sau popover nếu muốn (ví dụ: làm mờ).

interest-delay, interest-delay-start, và interest-delay-end Experimental

Thuộc tính viết tắt interest-delay và các thuộc tính dài hơn liên quan có thể được sử dụng để thêm độ trễ giữa khi người dùng hiển thị hoặc mất quan tâm và trình duyệt hành động dựa trên thay đổi đó.

:interest-source và :interest-target

Các bộ chọn này có thể được sử dụng để áp dụng kiểu cho interest invoker và phần tử mục tiêu liên kết của nó, tương ứng, chỉ khi quan tâm được chỉ ra.

:popover-open

Pseudo-class :popover-open khớp với một phần tử popover chỉ khi nó ở trạng thái hiển thị.

Giao diện

InterestEvent Experimental

Đối tượng sự kiện cho các sự kiện interest và loseinterest. Điều này bao gồm thuộc tính source chứa tham chiếu đến phần tử interest invoker liên kết.

ToggleEvent

Đại diện cho một sự kiện kích hoạt khi một phần tử popover được chuyển đổi giữa trạng thái hiển thị và ẩn. Đây là đối tượng sự kiện cho các sự kiện beforetoggle và toggle.

Mở rộng cho các giao diện khác

Thuộc tính phiên bản

interestForElement Experimental

Lấy hoặc đặt một tham chiếu đến phần tử đang được nhắm mục tiêu bởi một interest invoker.

HTMLElement.popover

Lấy và đặt trạng thái popover của một phần tử thông qua JavaScript ("auto", "hint" hoặc "manual"), và có thể được sử dụng để phát hiện tính năng.

HTMLButtonElement.popoverTargetElement và HTMLInputElement.popoverTargetElement

Lấy và đặt phần tử popover đang được kiểm soát bởi nút kiểm soát.

HTMLButtonElement.popoverTargetAction và HTMLInputElement.popoverTargetAction

Lấy và đặt hành động được thực hiện ("hide", "show" hoặc "toggle") trên phần tử popover đang được kiểm soát bởi nút kiểm soát.

Phương thức phiên bản

HTMLElement.hidePopover()

Ẩn một phần tử popover bằng cách xóa nó khỏi lớp trên cùng và tạo kiểu với display: none.

HTMLElement.showPopover()

Hiển thị một phần tử popover bằng cách thêm nó vào lớp trên cùng.

HTMLElement.togglePopover()

Chuyển đổi một phần tử popover giữa trạng thái hiển thị và ẩn.

Sự kiện

Sự kiện beforetoggle

Được kích hoạt ngay trước khi trạng thái của một phần tử popover thay đổi giữa hiển thị và ẩn, hoặc ngược lại.

Sự kiện toggle

Được kích hoạt ngay sau khi trạng thái của một phần tử popover thay đổi giữa hiển thị và ẩn, hoặc ngược lại.

interest Experimental

Được kích hoạt trên phần tử mục tiêu của interest invoker khi quan tâm được hiển thị.

loseinterest Experimental

Được kích hoạt trên phần tử mục tiêu của interest invoker khi mất quan tâm.

Ví dụ

• Xem tập hợp ví dụ Popover API của chúng tôi.
• Xem tập hợp ví dụ interest invoker của chúng tôi.

Thông số kỹ thuật

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

api.HTMLElement.popover

api.HTMLElement.beforetoggle_event.popover_elements

api.HTMLElement.toggle_event.popover_elements

Xem thêm

• Thuộc tính HTML toàn cục popover
• Thuộc tính HTML popovertarget
• Thuộc tính HTML popovertargetaction
• Pseudo-element CSS ::backdrop
• Pseudo-class CSS :popover-open