Sắp đến lúc rồi! Một trong những tính năng mà tôi quan tâm nhất vừa ra mắt trên tất cả trình duyệt hiện đại và chính thức ra mắt trong Baseline 2024. Tính năng này là API Popover. Cửa sổ bật lên cung cấp rất nhiều dữ liệu nguyên gốc tuyệt vời và khả năng tương tác của nhà phát triển để xây dựng các giao diện có nhiều 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 chức 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 trong 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 loại bỏ ánh sáng. Khi nhấp vào phần bên ngoài vùng cửa sổ bật lên, cửa sổ bật lên sẽ đóng và tiêu điểm trở về.
- Quản lý tiêu điểm mặc định. Mở cửa sổ bật lên khiến thẻ tiếp theo dừng lại bên trong cửa sổ bật lên.
- Các liên kết bàn phím dễ tiếp cận. Thao tác nhấn phím
eschoặc bật/tắt hai lần sẽ đóng cửa sổ bật lên và quay trở lại tiêu điểm. - Liên kết thành phần có thể truy cập được. Kết nối một phần tử cửa sổ bật lên với trình kích hoạt cửa sổ bật lên về mặt 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 một 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
popovertrên phần tử sẽ là cửa sổ bật lên. - Sau đó, hãy thêm một
idduy nhất vào 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
popovertargetcủa nút thành giá trịidcủa phần tử cửa sổ bật lên.
Điều này được thể hiện trong 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>
Để kiểm soát chi tiết hơn 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ụ: việc sử dụng thuộc tính popover thuần tuý mà không có giá trị sẽ giống như popover="auto". Giá trị auto cho phép đóng các cửa sổ bật lên và tự động đóng các cửa sổ bật lên khác. Khi sử dụng popover="manual", bạn sẽ phải thêm một nút đóng. Các cửa sổ bật lên thủ công 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 vào nút 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ác thành phần sau:
<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>
Cửa sổ bật lên so với hộp thoại phương thức
Bạn có thể đang 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à: bạn có thể không cần.
Điều quan trọng cần lưu ý là thuộc tính cửa sổ bật lên không tự cung cấp ngữ nghĩa. Giờ đây, mặc dù bạn có thể tạo trải nghiệm giống hộp thoại phương thức bằng cửa sổ bật lên, nhưng vẫn có một vài khác biệt chính giữa 2 công cụ này:
Phần tử <dialog> phụ
- Mở bằng
dialog.showModal(). - Do
dialog.close()đóng. - Đặt phần còn lại của trang ở chế độ trơ.
- Không hỗ trợ hành vi loại bỏ ánh sáng.
- Bạn có thể tạo kiểu cho trạng thái mở bằng thuộc tính
[open]. - Về mặt ngữ nghĩa, trình bày một thành phần tương tác chặn hoạt động tương tác với phần còn lại của trang.
Thuộc tính [popover]
- Có thể mở bằng phương thức gọi khai báo (
popovertarget). - Đóng bằng
popovertarget(cửa sổ bật lên tự động) hoặcpopovertargetaction=hide(cửa sổ bật lên thủ công). - Không làm cho phần còn lại của trang trở nên trơ.
- Hỗ trợ hành vi loại bỏ ánh sáng.
- Bạn có thể tạo kiểu cho trạng thái mở bằng lớp giả
:popover-open. - Không có ngữ nghĩa vốn có.
Kết luận và tài liệu đọ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 khác về khả năng hỗ trợ tiếp cận của tính năng và tài liệu về bộ tính năng), bạn nên đọc một số thông tin sau đây để biết thêm thông tin: