Cửa sổ bật lên: Chúng đang hồi sinh!

Jhey Tompkins

Thận trọng: Sáng kiến Open UI đã quyết định thay đổi thuộc tính từ popup thành popover cho Popover API vào ngày 27 tháng 10 năm 2022. Yêu cầu thay đổi này đã được hợp nhất vào Chromium vào ngày 3 tháng 11 năm 2022. Các tài liệu tham khảo đã được cập nhật để sử dụng quy ước đặt tên popover mới.

Mục tiêu của sáng kiến Open UI là giúp nhà phát triển dễ dàng mang đến trải nghiệm tuyệt vời cho người dùng. Để làm được điều này, chúng tôi đang cố gắng giải quyết những mẫu hình có vấn đề hơn mà nhà phát triển gặp phải. Chúng tôi có thể làm được điều này bằng cách cung cấp các API và thành phần tích hợp sẵn tốt hơn cho nền tảng.

Một vấn đề như vậy là cửa sổ bật lên, được mô tả trong Open UI là "Popovers".

Từ lâu, cửa sổ bật lên đã có danh tiếng khá phân cực. Một phần là do cách chúng được xây dựng và triển khai. Đây không phải là một mẫu dễ xây dựng, nhưng có thể mang lại nhiều giá trị bằng cách hướng người dùng đến một số nội dung nhất định hoặc giúp họ biết về nội dung trên trang web của bạn, đặc biệt là khi được sử dụng một cách tinh tế.

Thường có 2 mối lo ngại chính khi tạo cửa sổ bật lên:

Cách đảm bảo rằng nội dung đó được đặt phía trên phần nội dung còn lại ở một vị trí thích hợp.
Cách giúp người dùng tiếp cận được (dễ sử dụng bàn phím, có thể lấy tiêu điểm, v.v.).

API Popover tích hợp sẵn có nhiều mục tiêu, tất cả đều có cùng mục tiêu chung là giúp nhà phát triển dễ dàng xây dựng mẫu này. Các mục tiêu đáng chú ý là:

Giúp bạn dễ dàng hiển thị một phần tử và các phần tử con của phần tử đó ở phía trên phần còn lại của tài liệu.
Đảm bảo nội dung dễ tiếp cận.
Không yêu cầu JavaScript cho hầu hết các hành vi phổ biến (đóng nhanh, singleton, xếp chồng, v.v.).

Bạn có thể xem toàn bộ quy cách cho cửa sổ bật lên trên trang web OpenUI.

Khả năng tương thích với trình duyệt

Hiện tại, bạn có thể sử dụng API Popover tích hợp ở đâu? Tính năng này được hỗ trợ trong Chrome Canary đằng sau cờ "Experimental web platform features" (Các tính năng thử nghiệm của nền tảng web) tại thời điểm viết bài.

Để bật cờ đó, hãy mở Chrome Canary rồi truy cập vào chrome://flags. Sau đó, hãy bật cờ "Các tính năng thử nghiệm của nền tảng web".

Ngoài ra, còn có một Thử nghiệm nguồn gốc dành cho những nhà phát triển muốn thử nghiệm tính năng này trong môi trường phát hành chính thức.

Cuối cùng, có một polyfill đang được phát triển cho API này. Đừng quên xem kho lưu trữ tại github.com/oddbird/popup-polyfill.

Bạn có thể kiểm tra xem có hỗ trợ cửa sổ bật lên hay không bằng cách:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

Các giải pháp hiện tại

Hiện tại, bạn có thể làm gì để quảng bá nội dung của mình hơn những nội dung khác? Nếu được trình duyệt hỗ trợ, bạn có thể sử dụng phần tử hộp thoại HTML. Bạn cần sử dụng nó ở dạng "Phương thức". Và bạn cần có JavaScript để sử dụng.

Dialog.showModal();

Có một số điểm cần cân nhắc về khả năng hỗ trợ tiếp cận. Bạn nên sử dụng a11y-dialog, chẳng hạn như khi phục vụ người dùng Safari có phiên bản dưới 15.4.

Bạn cũng có thể sử dụng một trong nhiều thư viện dựa trên chú thích bật lên, cảnh báo hoặc chú giải công cụ. Nhiều công cụ trong số này có xu hướng hoạt động theo cách tương tự.

Thêm một số vùng chứa vào nội dung để hiển thị cửa sổ bật lên.
Tạo kiểu để nó nằm phía trên mọi thứ khác.
Tạo một phần tử rồi thêm phần tử đó vào vùng chứa để hiện một cửa sổ bật lên.
Ẩn bằng cách xoá phần tử cửa sổ bật lên khỏi DOM.

Điều này đòi hỏi thêm một phần phụ thuộc và nhiều quyết định hơn cho nhà phát triển. Bạn cũng cần nghiên cứu để tìm ra một dịch vụ cung cấp mọi thứ bạn cần. Popover API hướng đến việc phục vụ nhiều trường hợp, bao gồm cả chú thích. Mục tiêu là bao gồm tất cả những trường hợp phổ biến đó, giúp nhà phát triển không phải đưa ra một quyết định khác để họ có thể tập trung vào việc xây dựng trải nghiệm của mình.

Cửa sổ bật lên đầu tiên

Đây là tất cả những gì bạn cần.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

Nhưng điều gì đang xảy ra ở đây?

Bạn không cần đặt phần tử cửa sổ bật lên vào một vùng chứa hoặc bất cứ thứ gì – theo mặc định, phần tử này sẽ bị ẩn.
Bạn không cần viết bất kỳ đoạn mã JavaScript nào để làm cho thành phần này xuất hiện. Việc này được xử lý bằng thuộc tính popovertoggletarget.
Khi xuất hiện, lớp này sẽ được chuyển lên lớp trên cùng. Điều đó có nghĩa là sẽ được quảng bá ở phía trên document trong khung nhìn. Bạn không cần quản lý z-index hoặc lo lắng về vị trí của cửa sổ bật lên trong DOM. Nút này có thể nằm sâu trong DOM, với các phần tử tổ tiên bị cắt. Bạn cũng có thể xem những phần tử hiện đang ở lớp trên cùng thông qua Công cụ cho nhà phát triển. Để biết thêm thông tin về lớp trên cùng, hãy xem bài viết này.

Ảnh GIF minh hoạ tính năng hỗ trợ lớp trên cùng của Công cụ cho nhà phát triển

Bạn sẽ nhận được "Light Dismiss" (Đóng nhanh) ngay khi dùng. Điều đó có nghĩa là bạn có thể đóng cửa sổ bật lên bằng tín hiệu đóng, chẳng hạn như nhấp vào bên ngoài cửa sổ bật lên, dùng bàn phím để chuyển đến một phần tử khác hoặc nhấn phím Esc. Hãy mở lại và dùng thử!

Bạn còn nhận được lợi ích nào khác khi dùng cửa sổ bật lên? Hãy xem xét ví dụ này kỹ hơn. Hãy xem bản minh hoạ này với một số nội dung trên trang.

Nút hành động nổi đó có vị trí cố định với z-index cao.

.fab {
  position: fixed;
  z-index: 99999;
}

Nội dung của cửa sổ bật lên được lồng trong DOM, nhưng khi bạn mở cửa sổ bật lên, nội dung đó sẽ được chuyển lên trên phần tử ở vị trí cố định đó. Bạn không cần đặt bất kỳ kiểu nào.

Bạn cũng có thể nhận thấy rằng popover hiện có một phần tử giả ::backdrop. Tất cả các phần tử nằm ở lớp trên cùng đều nhận được một phần tử giả ::backdrop có thể tạo kiểu. Ví dụ này tạo kiểu cho ::backdrop bằng màu nền alpha giảm và bộ lọc phông nền, giúp làm mờ nội dung cơ bản.

Lưu ý: Theo mặc định, ::backdrop trên một cửa sổ bật lên sẽ có pointer-events: none được đặt.

Hãy chuyển sang phần tạo kiểu cho cửa sổ bật lên. Theo mặc định, cửa sổ bật lên có vị trí cố định và một số khoảng đệm được áp dụng. Ứng dụng này cũng có display: none. Bạn có thể ghi đè chế độ này để hiển thị một cửa sổ bật lên. Nhưng cách này sẽ không chuyển lớp đó lên lớp trên cùng.

[popover] { display: block; }

Bất kể cách bạn quảng bá cửa sổ bật lên, sau khi quảng bá cửa sổ bật lên lên lớp trên cùng, bạn có thể cần bố trí hoặc định vị cửa sổ đó. Bạn không thể nhắm đến lớp trên cùng và làm những việc như

:open {
  display: grid;
  place-items: center;
}

Theo mặc định, một cửa sổ bật lên sẽ bố trí ở giữa khung nhìn bằng cách sử dụng margin: auto. Tuy nhiên, trong một số trường hợp, bạn có thể muốn chỉ định rõ ràng về vị trí. Ví dụ:

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

Nếu muốn bố trí nội dung bên trong cửa sổ bật lên bằng lưới CSS hoặc flexbox, bạn nên bao bọc nội dung này trong một phần tử. Nếu không, bạn sẽ cần khai báo một quy tắc riêng để thay đổi display khi cửa sổ bật lên nằm ở lớp trên cùng. Việc đặt chế độ này theo mặc định sẽ khiến chế độ này xuất hiện theo mặc định, ghi đè display: none.

[popover]:open {
 display: flex;
}

Nếu đã thử bản minh hoạ đó, bạn sẽ thấy rằng cửa sổ bật lên hiện đang chuyển đổi vào và ra. Bạn có thể chuyển đổi các cửa sổ bật lên bằng cách sử dụng bộ chọn giả :open. Bộ chọn giả :open khớp với các cửa sổ bật lên đang hiển thị (và do đó nằm ở lớp trên cùng).

Lưu ý: Để kiểm tra xem một phần tử có đang mở bằng JavaScript hay không, hãy sử dụng: element.matches(':open'). Xin lưu ý rằng thông tin này có thể thay đổi khi quy cách phát triển.

Ví dụ này sử dụng một thuộc tính tuỳ chỉnh để điều khiển hiệu ứng chuyển đổi. Bạn cũng có thể áp dụng hiệu ứng chuyển đổi cho ::backdrop của cửa sổ bật lên.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

Một mẹo ở đây là nhóm các hiệu ứng chuyển đổi và ảnh động trong một truy vấn nội dung nghe nhìn cho chuyển động. Điều này cũng có thể giúp bạn duy trì thời gian biểu. Điều này là do bạn không thể chia sẻ các giá trị giữa popover và ::backdrop thông qua thuộc tính tuỳ chỉnh.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

Cho đến thời điểm này, bạn đã thấy cách sử dụng popovertoggletarget để hiện một cửa sổ bật lên. Để đóng thẻ này, chúng ta sẽ sử dụng "Đóng nhanh". Tuy nhiên, bạn cũng có thể sử dụng các thuộc tính popovershowtarget và popoverhidetarget. Hãy thêm một nút vào cửa sổ bật lên để ẩn cửa sổ đó và thay đổi nút bật/tắt để dùng popovershowtarget.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

Lưu ý: Bạn cũng có thể nhận thấy hiệu ứng chuyển cảnh xuất hiện và biến mất đã thay đổi. Giờ đây, hiệu ứng này được hỗ trợ bởi các ảnh động riêng biệt để xuất hiện ở một bên và biến mất ở bên còn lại. Điều này có nghĩa là bạn có thể thực hiện những việc như nhập trên một trục và thoát trên một trục khác. Hãy nhớ đặt animation-fill-mode nếu thời gian ::backdrop và [popover] của bạn khác nhau.

Như đã đề cập trước đó, Popover API không chỉ bao gồm khái niệm cũ của chúng ta về cửa sổ bật lên. Bạn có thể tạo cho tất cả các loại kịch bản như thông báo, trình đơn, chú thích, v.v.

Một số trường hợp trong số đó cần có các mẫu tương tác khác nhau. Các hoạt động tương tác như di chuột. Chúng tôi đã thử nghiệm việc sử dụng thuộc tính popoverhovertarget nhưng hiện chưa triển khai.

<div popoverhovertarget="hover-popover">Hover for Code</div>

Ý tưởng là bạn di chuột lên một phần tử để cho thấy mục tiêu. Bạn có thể định cấu hình hành vi này thông qua các thuộc tính CSS. Các thuộc tính CSS này sẽ xác định khoảng thời gian di chuột vào và ra khỏi một phần tử mà cửa sổ bật lên phản ứng. Hành vi mặc định được thử nghiệm là một cửa sổ bật lên xuất hiện sau khi người dùng nhấp vào 0.5s của :hover. Sau đó, bạn cần phải đóng nhanh hoặc mở một cửa sổ bật lên khác để đóng (Sẽ có thêm thông tin về vấn đề này). Nguyên nhân là do thời lượng ẩn của cửa sổ bật lên được đặt thành Infinity.

Lưu ý: Việc sử dụng popoverhovertarget là điều không được chuẩn hoá hoặc hiện được triển khai.

Trong thời gian chờ đợi, bạn có thể sử dụng JavaScript để polyfill chức năng đó.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopover();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

Lợi ích của việc đặt một cửa sổ di chuột rõ ràng là đảm bảo hành động của người dùng là có chủ ý (ví dụ: người dùng di chuyển con trỏ lên một mục tiêu). Chúng ta không muốn hiển thị cửa sổ bật lên trừ phi đó là ý định của người dùng.

Hãy thử bản minh hoạ này, trong đó bạn có thể di chuột lên mục tiêu khi cửa sổ được đặt thành 0.5s.

Trước khi khám phá một số trường hợp sử dụng và ví dụ phổ biến, hãy cùng xem xét một vài điều.

Chúng tôi đã đề cập đến hành vi tương tác không phải JavaScript. Nhưng còn hành vi của cửa sổ bật lên nói chung thì sao. Nếu bạn không muốn dùng tính năng "Tắt nhanh" thì sao? Hoặc bạn muốn áp dụng mẫu singleton cho các cửa sổ bật lên?

Popover API cho phép bạn chỉ định 3 loại cửa sổ bật lên có hành vi khác nhau.

[popover=auto]/[popover]:

Hỗ trợ lồng ghép. Điều này không chỉ có nghĩa là được lồng trong DOM. Định nghĩa về một cửa sổ bật lên tổ tiên là một cửa sổ bật lên:
- liên quan đến vị trí DOM (phần tử con).
- liên quan đến việc kích hoạt các thuộc tính trên các phần tử con, chẳng hạn như popovertoggletarget, popovershowtarget, v.v.
- liên quan đến thuộc tính anchor (CSS Anchoring API đang trong quá trình phát triển).
Tắt nhanh.
Khi mở, các cửa sổ bật lên khác không phải là cửa sổ bật lên gốc sẽ bị đóng. Hãy thử bản minh hoạ bên dưới để xem cách hoạt động của tính năng lồng với các cửa sổ bật lên tổ tiên. Xem cách thay đổi một số trường hợp popoverhidetarget/popovershowtarget thành popovertoggletarget.
Thao tác loại bỏ nhẹ một thông báo sẽ loại bỏ tất cả thông báo, nhưng thao tác loại bỏ một thông báo trong nhóm sẽ chỉ loại bỏ những thông báo phía trên thông báo đó trong nhóm.

Thận trọng: Trước đây, một loại cửa sổ bật lên thứ ba sử dụng popover=hint đã được triển khai cho các trường hợp sử dụng như chú thích công cụ. Vấn đề này đã được giải quyết vào ngày 13 tháng 10 năm 2022, để chuyển vấn đề này sang phiên bản triển khai thứ hai.

[popover=manual]:

Không đóng các cửa sổ bật lên khác.
Không có tính năng tắt bằng cách chạm vào vùng sáng.
Yêu cầu đóng rõ ràng thông qua phần tử kích hoạt hoặc JavaScript.

API JavaScript

Khi cần kiểm soát nhiều hơn đối với các cửa sổ bật lên, bạn có thể sử dụng JavaScript. Bạn sẽ nhận được cả phương thức showPopover và hidePopover. Bạn cũng có các sự kiện popovershow và popoverhide để theo dõi:

Hiện cửa sổ bật lên js popoverElement.showPopover() Ẩn cửa sổ bật lên:

popoverElement.hidePopover()

Theo dõi cửa sổ bật lên đang hiển thị:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Nghe để xem cửa sổ bật lên có xuất hiện hay không và huỷ việc hiển thị cửa sổ bật lên:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

Nghe một cửa sổ bật lên đang bị ẩn:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Bạn không thể huỷ một cửa sổ bật lên đang bị ẩn:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

Kiểm tra xem popover có nằm ở lớp trên cùng hay không:

popoverElement.matches(':open')

Điều này giúp cung cấp thêm năng lượng cho một số trường hợp ít phổ biến. Ví dụ: hiện cửa sổ bật lên sau một khoảng thời gian không hoạt động.

Bản minh hoạ này có các cửa sổ bật lên có âm thanh bật lên, vì vậy chúng ta sẽ cần JavaScript để phát âm thanh. Khi nhấp vào, chúng ta sẽ ẩn cửa sổ bật lên, phát âm thanh rồi hiện lại cửa sổ đó.

Hỗ trợ tiếp cận

Khả năng hỗ trợ tiếp cận là yếu tố hàng đầu khi cân nhắc về Popover API. Các mối liên kết hỗ trợ tiếp cận sẽ liên kết cửa sổ bật lên với phần tử kích hoạt (nếu cần). Điều này có nghĩa là bạn không cần khai báo các thuộc tính aria-* như aria-haspopup, giả sử bạn sử dụng một trong các thuộc tính kích hoạt như popovertoggletarget.

Để quản lý tiêu điểm, bạn có thể sử dụng thuộc tính tự động lấy tiêu điểm để di chuyển tiêu điểm đến một phần tử bên trong cửa sổ bật lên. Điều này cũng tương tự như đối với một hộp thoại, nhưng sự khác biệt nằm ở thời điểm trả lại tiêu điểm, và đó là do tính năng đóng nhanh. Trong hầu hết các trường hợp, việc đóng một cửa sổ bật lên sẽ trả tiêu điểm về phần tử được lấy tiêu điểm trước đó. Tuy nhiên, tiêu điểm sẽ được chuyển đến một phần tử được nhấp khi đóng nhanh, nếu phần tử đó có thể lấy tiêu điểm. Hãy xem phần về việc quản lý tiêu điểm trong tài liệu giải thích.

Bạn cần mở "phiên bản toàn màn hình" của bản minh hoạ này để xem cách hoạt động.

Trong bản minh hoạ này, phần tử được lấy tiêu điểm sẽ có một đường viền màu xanh lục. Thử dùng phím Tab để di chuyển trong giao diện. Lưu ý vị trí tiêu điểm được trả về khi một cửa sổ bật lên bị đóng. Bạn cũng có thể nhận thấy rằng nếu bạn nhấn phím Tab, cửa sổ bật lên sẽ đóng. Đó là theo thiết kế. Mặc dù cửa sổ bật lên có tính năng quản lý tiêu điểm, nhưng chúng không giữ tiêu điểm. Ngoài ra, chế độ thao tác bằng bàn phím sẽ xác định tín hiệu đóng khi tiêu điểm di chuyển ra khỏi cửa sổ bật lên.

Neo (đang phát triển)

Đối với cửa sổ bật lên, một mẫu khó xử lý là việc neo phần tử vào trình kích hoạt của phần tử đó. Ví dụ: nếu chú giải công cụ được đặt để xuất hiện phía trên trình kích hoạt nhưng tài liệu bị cuộn. Chú thích đó có thể bị cắt bớt bởi khung hiển thị. Hiện có các dịch vụ JavaScript để xử lý vấn đề này, chẳng hạn như "Floating UI". Chúng sẽ định vị lại chú thích để bạn không gặp phải tình trạng này và dựa vào thứ tự vị trí mong muốn.

Tuy nhiên, chúng tôi muốn bạn có thể xác định điều này bằng các kiểu của mình. Có một API đồng hành đang được phát triển cùng với Popover API để giải quyết vấn đề này. API "CSS Anchor Positioning" (Định vị điểm neo CSS) sẽ cho phép bạn liên kết các phần tử với các phần tử khác và API này sẽ thực hiện việc này theo cách định vị lại các phần tử để chúng không bị cắt bởi khung hiển thị.

Bản minh hoạ này sử dụng Anchoring API ở trạng thái hiện tại. Vị trí của thuyền sẽ phản hồi vị trí của điểm neo trong khung nhìn.

Dưới đây là một đoạn mã CSS giúp bản minh hoạ này hoạt động. Không cần JavaScript.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

Bạn có thể xem thông số kỹ thuật tại đây. Ngoài ra, sẽ có một polyfill cho API này.

Ví dụ

Giờ bạn đã biết những tính năng và cách sử dụng của cửa sổ bật lên, hãy cùng xem một số ví dụ.

Thông báo

Bản minh hoạ này cho thấy thông báo "Sao chép vào bảng nhớ tạm".

Sử dụng [popover=manual].
Khi có thao tác, hãy hiện cửa sổ bật lên bằng showPopover.
Sau khi hết thời gian chờ 2000ms, hãy ẩn nó bằng hidePopover.

Thông báo ngắn

Bản minh hoạ này sử dụng lớp trên cùng để hiển thị thông báo theo kiểu thông báo nhanh.

Một cửa sổ bật lên có loại manual đóng vai trò là vùng chứa.
Thông báo mới sẽ được thêm vào cửa sổ bật lên và cửa sổ bật lên sẽ xuất hiện.
Chúng sẽ bị xoá bằng web animations API khi người dùng nhấp vào và bị xoá khỏi DOM.
Nếu không có thông báo nào để hiển thị, thì cửa sổ bật lên sẽ bị ẩn.

Trình đơn lồng nhau

Bản minh hoạ này cho thấy cách hoạt động của một trình đơn điều hướng lồng nhau.

Sử dụng [popover=auto] vì thành phần này cho phép các cửa sổ bật lên lồng nhau.
Sử dụng autofocus trên đường liên kết đầu tiên của mỗi trình đơn thả xuống để điều hướng bằng bàn phím.
Đây là một lựa chọn hoàn hảo cho CSS Anchoring API. Tuy nhiên, đối với bản minh hoạ này, bạn có thể sử dụng một lượng nhỏ JavaScript để cập nhật các vị trí bằng cách sử dụng các thuộc tính tuỳ chỉnh.

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

Hãy nhớ rằng vì bản minh hoạ này sử dụng autofocus, nên bạn cần mở bản minh hoạ này ở "chế độ xem toàn màn hình" để điều hướng bằng bàn phím.

Bản minh hoạ này cho thấy cách bạn có thể bật nội dung nghe nhìn.

Sử dụng [popover=auto] để đóng nhanh.
JavaScript theo dõi sự kiện play của video và bật video lên.
Sự kiện popoverhide của cửa sổ bật lên sẽ tạm dừng video.

Cửa sổ bật lên theo kiểu wiki

Bản minh hoạ này cho thấy cách bạn có thể tạo chú thích nội dung cùng dòng có chứa nội dung nghe nhìn.

Sử dụng [popover=auto]. Việc hiện một nhóm sẽ ẩn các nhóm khác vì chúng không phải là nhóm tổ tiên.
Xuất hiện trên pointerenter bằng JavaScript.
Một lựa chọn hoàn hảo khác cho CSS Anchoring API.

Ngăn điều hướng

Bản minh hoạ này tạo một ngăn điều hướng bằng cách dùng cửa sổ bật lên.

Sử dụng [popover=auto] để đóng nhanh.
Sử dụng autofocus để lấy tiêu điểm cho mục điều hướng đầu tiên.

Quản lý phông nền

Bản minh hoạ này cho thấy cách bạn có thể quản lý phông nền cho nhiều cửa sổ bật lên khi chỉ muốn một ::backdrop hiển thị.

Sử dụng JavaScript để duy trì danh sách các cửa sổ bật lên đang hiển thị.
Áp dụng tên lớp cho cửa sổ bật lên thấp nhất trong lớp trên cùng.

Bản minh hoạ này cho thấy cách sử dụng popover để chuyển canvas lên lớp trên cùng và dùng lớp này để hiện con trỏ tuỳ chỉnh.

Quảng bá canvas lên lớp trên cùng bằng showPopover và [popover=manual].
Khi các cửa sổ bật lên khác được mở, hãy ẩn và hiện cửa sổ bật lên canvas để đảm bảo cửa sổ này ở trên cùng.

Bản minh hoạ này cho thấy cách bạn có thể sử dụng một cửa sổ bật lên làm bảng hành động.

Hiển thị cửa sổ bật lên theo mặc định, ghi đè display.
Actionsheet được mở bằng trình kích hoạt popover.
Khi cửa sổ bật lên xuất hiện, cửa sổ này sẽ được chuyển lên lớp trên cùng và chuyển đổi thành chế độ xem.
Bạn có thể dùng thao tác đóng nhanh để trả lại thẻ.

Bản minh hoạ này cho thấy cách bạn có thể sử dụng cửa sổ bật lên cho giao diện người dùng theo kiểu bảng lệnh.

Dùng tổ hợp phím cmd + j để hiện cửa sổ bật lên.
input được lấy nét bằng autofocus.
Hộp kết hợp là popover thứ hai nằm bên dưới đầu vào chính.
Tính năng đóng nhanh sẽ đóng bảng màu nếu không có trình đơn thả xuống.
Một đề xuất khác cho Anchoring API

Bản minh hoạ này cho thấy một cửa sổ bật lên không hoạt động sau 4 giây. Một mẫu giao diện người dùng thường được dùng trong các ứng dụng lưu giữ thông tin bảo mật về người dùng để hiện một phương thức đăng xuất.

Sử dụng JavaScript để hiện cửa sổ bật lên sau một khoảng thời gian không hoạt động.
Đặt lại đồng hồ hẹn giờ khi cửa sổ bật lên xuất hiện.

Tr.b.vệ m.h

Tương tự như bản minh hoạ trước, bạn có thể thêm một chút thú vị vào trang web của mình và thêm một trình bảo vệ màn hình.

Sử dụng JavaScript để hiện cửa sổ bật lên sau một khoảng thời gian không hoạt động.
Vuốt nhẹ để ẩn và đặt lại bộ tính giờ.

Theo dõi con nháy

Bản minh hoạ này cho thấy cách bạn có thể làm cho một cửa sổ bật lên đi theo dấu nháy nhập.

Hiện cửa sổ bật lên dựa trên lựa chọn, sự kiện chính hoặc dữ liệu đầu vào là ký tự đặc biệt.
Sử dụng JavaScript để cập nhật vị trí của cửa sổ bật lên bằng các thuộc tính tuỳ chỉnh có phạm vi.
Mô hình này đòi hỏi bạn phải cân nhắc kỹ lưỡng về nội dung sẽ xuất hiện và khả năng tiếp cận.
Bạn thường thấy loại giao diện người dùng này trong các ứng dụng và giao diện người dùng chỉnh sửa văn bản nơi bạn có thể gắn thẻ.

Trình đơn nút hành động nổi

Bản minh hoạ này cho thấy cách bạn có thể sử dụng cửa sổ bật lên để triển khai trình đơn nút hành động nổi mà không cần JavaScript.

Quảng bá một cửa sổ bật lên thuộc loại manual bằng phương thức showPopover. Đây là nút chính.
Trình đơn là một cửa sổ bật lên khác, là đích đến của nút chính.
Trình đơn mở ra khi bạn nhấn popovertoggletarget.
Sử dụng autofocus để đặt tiêu điểm vào mục đầu tiên trong trình đơn của chương trình.
Thao tác đóng nhanh sẽ đóng trình đơn.
Biểu tượng xoắn sử dụng :has(). Bạn có thể đọc thêm về :has() trong bài viết này.

Vậy là xong!

Đó là phần giới thiệu về cửa sổ bật lên, sẽ xuất hiện trong tương lai như một phần của sáng kiến Open UI. Nếu được sử dụng một cách hợp lý, tính năng này sẽ là một bổ sung tuyệt vời cho nền tảng web.

Hãy nhớ xem Open UI. Chú thích dạng cửa sổ bật lên luôn được cập nhật khi API phát triển. Và đây là bộ sưu tập cho tất cả các bản minh hoạ.

Cảm ơn bạn đã ghé thăm!

Cửa sổ bật lên: Chúng đang hồi sinh!

Khả năng tương thích với trình duyệt

Các giải pháp hiện tại

Cửa sổ bật lên đầu tiên

Tạo kiểu cho cửa sổ bật lên

Các loại cửa sổ bật lên

API JavaScript

Hỗ trợ tiếp cận

Neo (đang phát triển)

Ví dụ

Thông báo

Thông báo ngắn

Trình đơn lồng nhau

Cửa sổ bật lên nội dung nghe nhìn

Cửa sổ bật lên theo kiểu wiki

Ngăn điều hướng

Quản lý phông nền

Cửa sổ bật lên con trỏ tuỳ chỉnh

Cửa sổ bật lên trang tính hành động

Cửa sổ bật lên được kích hoạt bằng bàn phím

Cửa sổ bật lên được hẹn giờ

Tr.b.vệ m.h

Theo dõi con nháy

Trình đơn nút hành động nổi

Vậy là xong!

Cửa sổ bật lên: Chúng đang hồi sinh! Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Khả năng tương thích với trình duyệt

Các giải pháp hiện tại

Cửa sổ bật lên đầu tiên

Tạo kiểu cho cửa sổ bật lên

Các loại cửa sổ bật lên

API JavaScript

Hỗ trợ tiếp cận

Neo (đang phát triển)

Ví dụ

Thông báo

Thông báo ngắn

Trình đơn lồng nhau

Cửa sổ bật lên nội dung nghe nhìn

Cửa sổ bật lên theo kiểu wiki

Ngăn điều hướng

Quản lý phông nền

Cửa sổ bật lên con trỏ tuỳ chỉnh

Cửa sổ bật lên trang tính hành động

Cửa sổ bật lên được kích hoạt bằng bàn phím

Cửa sổ bật lên được hẹn giờ

Tr.b.vệ m.h

Theo dõi con nháy

Trình đơn nút hành động nổi

Vậy là xong!

Cửa sổ bật lên: Chúng đang hồi sinh!