API Popover sẽ chuyển đến Cơ sở

Una Kravets

Sắp đến lúc rồi! Một trong những tính năng mà tôi háo hức nhất vừa có mặt trên mọi trình duyệt hiện đại và chính thức có mặt trong Baseline 2024. Tính năng này là Popover API. Cửa sổ bật lên cung cấp rất nhiều thành phần gốc và tương tác thú vị cho nhà phát triển để xây dựng giao diện theo lớp như chú giải công cụ, trình đơn, giao diện người dùng giảng dạy, v.v.

Một số điểm nổi bật ngắn gọn về các tính năng cửa sổ bật lên bao gồm:

• Quảng bá lên lớp trên cùng. Cửa sổ bật lên sẽ xuất hiện ở lớp trên cùng phía trên phần còn lại của trang, vì vậy, bạn không cần phải sử dụng z-index.
• Chức năng đóng mở đèn. Thao tác nhấp vào bên ngoài vùng cửa sổ bật lên sẽ đóng cửa sổ bật lên và tiêu điểm trả lại.
• Quản lý tiêu điểm mặc định. Khi bạn mở cửa sổ bật lên, thẻ tiếp theo sẽ dừng lại bên trong cửa sổ bật lên.
• Liên kết bàn phím hỗ trợ tiếp cận. Thao tác nhấn phím esc hoặc bật/tắt hai lần sẽ đóng cửa sổ bật lên và tiêu điểm quay lại.
• Liên kết thành phần có thể truy cập. Việc kết nối một phần tử cửa sổ bật lên với một cửa sổ bật lên sẽ kích hoạt theo ngữ nghĩa.

Tạo cửa sổ bật lên

Việc tạo cửa sổ bật lên khá đơn giản. Để sử dụng các giá trị mặc định, bạn chỉ cần có button để kích hoạt cửa sổ bật lên và một phần tử để kích hoạt.

• Trước tiên, hãy đặt thuộc tính popover trên phần tử sẽ là cửa sổ bật lên.
• Sau đó, thêm một id duy nhất trên phần tử cửa sổ bật lên.
• Cuối cùng, để kết nối nút với cửa sổ bật lên, hãy đặt popovertarget của nút thành giá trị id của phần tử cửa sổ bật lên.

Thông tin này được hiển thị trong đoạn mã sau:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Để có quyền kiểm soát chi tiết hơn đối với cửa sổ bật lên, bạn có thể đặt rõ ràng các loại cửa sổ bật lên. Ví dụ: sử dụng thuộc tính popover đơn thuần không có giá trị sẽ giống như popover="auto". Giá trị auto cho phép loại bỏ ánh sáng và tự động đóng các cửa sổ bật lên khác. Sử dụng popover="manual" và bạn sẽ cần thêm nút đóng, cửa sổ bật lên thủ công sẽ không đóng các cửa sổ bật lên khác hoặc cho phép người dùng đóng cửa sổ bật lên bằng cách nhấp để thoát trong giao diện người dùng. Bạn tạo cửa sổ bật lên thủ công bằng cách sử dụng:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Hộp thoại bật lên so với hộp thoại chế độ

Bạn có thể thắc mắc liệu mình có cần cửa sổ bật lên khi hộp thoại tồn tại hay không và câu trả lời là: có thể bạn không cần.

Bạn cần lưu ý rằng thuộc tính cửa sổ bật lên không tự cung cấp ngữ nghĩa. Và mặc dù giờ đây bạn có thể xây dựng trải nghiệm giống hộp thoại phương thức bằng cách sử dụng cửa sổ bật lên, nhưng có một vài điểm khác biệt chính giữa 2 loại này:

Kết luận và đọc thêm

popover mang đến nhiều tính năng thú vị trên nền tảng này. Để tìm hiểu thêm về API này, bao gồm cả thông tin thêm về khả năng hỗ trợ tiếp cận của tính năng và tài liệu liên quan đến bộ tính năng, bạn nên đọc một số thông tin sau đây:

• Ngữ nghĩa và thuộc tính cửa sổ bật lên: sử dụng khi nào? của Hidde de Vries
• Tính năng hỗ trợ tiếp cận bằng cửa sổ bật lên: những việc mà trình duyệt Hidde de Vries làm và không làm
• Tài liệu MDN về cửa sổ bật lên