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

Jhey Tompkins

Mục tiêu của Sáng kiến giao diện người dùng mở là giúp nhà phát triển dễ dàng tạo ra trải nghiệm người dùng tuyệt vời hơn. Để làm được điều này, chúng tôi đang cố gắng xử lý những mẫu hình có nhiều 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 trên nền tảng.

Một trong những vấn đề đó là cửa sổ bật lên, được mô tả trong Giao diện người dùng mở là "Cửa sổ bật lên".

Cửa sổ bật lên đã có danh tiếng khá phân cực trong một thời gian dài. Một phần là do cách tạo và triển khai các ứng dụng này. Đây không phải là mẫu dễ tạo, 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ọ nhận biết 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ó hai mối quan tâm chính khi xây dựng cửa sổ bật lên:

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

API Cửa sổ bật lên tích hợp sẵn có nhiều mục tiêu, tất cả đều có cùng mục tiêu tổng quát là giúp nhà phát triển dễ dàng xây dựng mẫu này. Một số mục tiêu đáng chú ý trong số đó là:

  • 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.
  • Giúp người dùng 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 nhẹ, singleton, xếp chồng, v.v.).

Bạn có thể xem thông số kỹ thuật đầy đủ của 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

Bạn hiệ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 sau cờ "Các tính năng nền tảng web thử nghiệm" 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 đó, bật cờ "Tính năng nền tảng web thử nghiệm".

Chúng tôi cũng có Origin Trial (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, chúng tôi đang phát triển một polyfill cho API này. Hãy nhớ tham khảo kho lưu trữ tại github.com/oddbird/popup-polyfill.

Bạn có thể kiểm tra dịch vụ hỗ trợ qua cửa sổ bật lên bằng cách:

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

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 hết? Nếu trình duyệt của bạn hỗ trợ, bạn có thể sử dụng phần tử Hộp thoại HTML. Bạn cần sử dụng hàm này ở dạng "Modal". Và bạn cần có JavaScript để sử dụng tính năng này.

Dialog.showModal();

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

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

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

Điều này đòi hỏi nhà phát triển phải phụ thuộc thêm và đưa ra nhiều quyết định hơn. Bạn cũng cần tìm hiểu để tìm được một dịch vụ cung cấp mọi thứ bạn cần. Popover API nhắm đến việc phục vụ nhiều tình huống, bao gồm cả chú giải công cụ. Mục tiêu là bao gồm tất cả các tình huống phổ biến đó, giúp nhà phát triển không phải đưa ra 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

Đó 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 phải đặt phần tử cửa sổ bật lên vào một vùng chứa hay bất kỳ phần tử nào khác – phần tử này bị ẩn theo mặc định.
  • Bạn không phải viết bất kỳ JavaScript nào để trình duyệt hiển thị. Việc này sẽ do thuộc tính popovertoggletarget xử lý.
  • 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à thành phần hiển thị này được quảng bá phía trên document trong khung nhìn. Bạn không cần phải 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ó có thể được lồng sâu trong DOM, với các phần tử mẹ 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 DevTools. Để biết thêm 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 DevTools

  • Bạn sẽ có tính năng "Light Dismiss" (Ẩn nhẹ) ngay từ đầu. Đ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, điều hướng bằng bàn phím đến một thành phần khác hoặc nhấn phím Esc. Hãy mở lại ứng dụng và thử xem!

Bạn còn nhận được gì khác khi dùng cửa sổ bật lên? Hãy xem xét thêm ví dụ này. Hãy xem xét 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ố định vị trí 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 phía trên phần tử vị trí cố định đó. Bạn không cần thiết lập kiểu nào.

Bạn cũng có thể nhận thấy rằng cửa sổ bật lên hiện có phần tử giả ::backdrop. Tất cả các phần tử ở 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 định kiểu ::backdrop với màu nền alpha và một bộ lọc phông nền, giúp làm mờ nội dung cơ bản.

Định kiểu cho cửa sổ bật lên

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

[popover] { display: block; }

Bất kể bạn quảng bá cửa sổ bật lên như thế nào, 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ật lên đó. 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ẽ nằm ở 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 nên nêu rõ 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 cách sử dụng lưới CSS hoặc hộp linh hoạt, bạn nên gói phần tử này trong một phần tử. Nếu không, bạn cần khai báo một quy tắc riêng để thay đổi display sau khi cửa sổ bật lên nằm ở lớp trên cùng. Việc đặt giá trị này theo mặc định sẽ hiển thị 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 vào và ra 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 đó ở lớp trên cùng).

Ví dụ này sử dụng thuộc tính tuỳ chỉnh để thúc đẩy quá trình 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. Việc này cũng có thể giúp duy trì thời gian của bạn. Lý do là bạn không thể chia sẻ 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 việc sử dụng popovertoggletarget để hiển thị cửa sổ bật lên. Để đóng cửa sổ này, chúng ta sẽ sử dụng tính năng "Đóng nhẹ". 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 một cửa sổ bật lên để ẩn nút đó và thay đổi nút bật/tắt để sử dụng popovershowtarget.

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

Như đã đề cập trước đó, Popover API không chỉ bao gồm khái niệm cũ về cửa sổ bật lên. Bạn có thể tạo cho tất cả các loại tình huống như thông báo, trình đơn, chú giải công cụ, 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 qua. 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 qua một phần tử để hiển thị 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à di chuột 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 có một cửa sổ bật lên hiển thị sau một 0.5s rõ ràng của :hover. Sau đó, bạn cần đóng nhẹ hoặc mở một cửa sổ bật lên khác để đóng (Sẽ có thêm thông tin về việc này). Điều này là do thời lượng ẩn của cửa sổ bật lên được đặt thành Infinity.

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 đối tượng làm 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ỏ qua một mục tiêu). Chúng tôi không muốn hiển thị cửa sổ bật lên trừ phi đó là ý định của họ.

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

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

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

Chúng ta đã đề 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 sử dụng tính năng "Light dismiss" thì sao? Hay bạn muốn áp dụng mẫu singleton cho các cửa sổ bật lên?

API Cửa sổ bật lên 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 nhau. Điều này không chỉ có nghĩa là lồng trong DOM. Định nghĩa về cửa sổ bật lên của tổ tiên là một định nghĩa như sau:
    • liên quan theo vị trí DOM (thành phần con).
    • liên quan với nhau bằng cách kích hoạt các thuộc tính trên phần tử con, chẳng hạn như popovertoggletarget, popovershowtarget, v.v.
    • liên quan với nhau bằng thuộc tính anchor (CSS Anchoring API đang trong quá trình phát triển).
  • Đóng nhẹ.
  • Thao tác mở sẽ loại bỏ các cửa sổ bật lên khác không phải là cửa sổ bật lên của tổ tiên. Hãy thử nghiệm với bản minh hoạ bên dưới để làm nổi bật cách hoạt động của tính năng lồng với các cửa sổ bật lên gốc. Hãy xem việc thay đổi một số thực thể popoverhidetarget/popovershowtarget thành popovertoggletarget đã thay đổi mọi thứ như thế nào.
  • Khi bạn đóng một thông báo nhẹ, tất cả thông báo sẽ bị đóng, nhưng khi bạn đóng một thông báo trong ngăn xếp, chỉ những thông báo ở trên thông báo đó trong ngăn xếp mới bị đóng.

[popover=manual]:

  • Không đóng các cửa sổ bật lên khác.
  • Không tắt, chỉ nhấp nháy.
  • Yêu cầu loại bỏ rõ ràng thông qua phần tử trình kích hoạt hoặc JavaScript.

API JavaScript

Khi cần kiểm soát nhiều hơn đối với 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()

Nghe cửa sổ bật lên xuất hiện:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Theo dõi một cửa sổ bật lên đang hiển thị và huỷ hiển thị cửa sổ đó:

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

Theo dõi 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 một cửa sổ bật lên có ở lớp trên cùng hay không:

popoverElement.matches(':open')

Việc này giúp tăng cường hiệu quả cho một số trường hợp ít gặp hơn. Ví dụ: hiển thị một 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ửa sổ bật lên với tiếng bật lên có thể nghe thấy, vì vậy chúng ta cần JavaScript để phát âm thanh. Khi nhấp, chúng ta sẽ ẩn cửa sổ bật lên, phát âm thanh rồi hiển thị lại cửa sổ bật lên.

Hỗ trợ tiếp cận

Khả năng tiếp cận là ưu tiên hàng đầu khi cân nhắc sử dụng API Popover. Các mối liên kết hỗ trợ tiếp cận liên kết cửa sổ bật lên với phần tử kích hoạt của cửa sổ đó (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 nét để di chuyển tiêu điểm đến một phần tử bên trong một cửa sổ bật lên. Điều này cũng giống như đối với một Hộp thoại, nhưng sự khác biệt xảy ra khi trả về tiêu điểm và đó là do thao tác đóng nhẹ. 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ả về tiêu điểm về thành phần được lấy tiêu điểm trước đó. Tuy nhiên, tiêu điểm sẽ được chuyển đến phần tử đã nhấp khi đóng nhẹ, nếu phần tử đó có thể nhận tiêu điểm. Hãy xem phần về việc quản lý tiêu điểm trong nội dung 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 bản minh hoạ hoạt động như thế nào.

Trong bản minh hoạ này, phần tử được đặt tiêu điểm sẽ có đường viền màu xanh lục. Hãy thử nhấn phím Tab để di chuyển xung quanh giao diện. Lưu ý vị trí tiêu điểm được trả về khi một cửa sổ bật lên đóng lại. Bạn cũng có thể nhận thấy rằng nếu bạn nhấn phím tab về, cửa sổ bật lên sẽ đóng lại. Đó là do 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 làm cho lấy tiêu điểm. Và thao tác điều hướng 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)

Khi nói đến cửa sổ bật lên, một mẫu phức tạp để phục vụ là neo phần tử vào trình kích hoạt. Ví dụ: nếu chú giải công cụ được đặt để hiển thị 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ị khung nhìn cắt bớt. Hiện có các dịch vụ JavaScript để xử lý vấn đề này, chẳng hạn như "Giao diện người dùng nổi". Chúng sẽ đặt lại vị trí chú thích để giúp bạn ngừng việc này, đồng thời 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. Chúng tôi đang phát triển một API đồng hành cùng với API Popover để giải quyết vấn đề này. API "Định vị neo CSS" sẽ cho phép bạn chia sẻ Internet các phần tử với các phần tử khác và nó 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ị khung nhìn cắt bỏ.

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 phản hồi vị trí của 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 cửa sổ bật lên có những lợi ích gì và cách thức hoạt động, hãy cùng tìm hiểu một số ví dụ.

Thông báo

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

  • Sử dụng [popover=manual]
  • Cửa sổ bật lên của chương trình hành động showPopover.
  • Sau khi 2000ms hết thời gian chờ, hãy ẩn 2000ms 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 kiểu thông báo ngắn.

  • Một cửa sổ bật lên có loại manual đóng vai trò là vùng chứa.
  • Các thông báo mới được thêm vào cửa sổ bật lên và cửa sổ bật lên sẽ hiển thị.
  • Các hiệu ứng này sẽ bị xoá bằng API ảnh động trên web khi nhấp và bị xoá khỏi DOM.
  • Nếu không có thông báo ngắn nào để hiển 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 trình đơn điều hướng lồng nhau.

  • Sử dụng [popover=auto] vì nó 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 ứng cử viê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 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ế độ "chế độ xem toàn màn hình" để điều hướng bằng bàn phím.

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

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

  • Sử dụng [popover=auto] để đóng nhẹ.
  • JavaScript sẽ theo dõi sự kiện play của video và bật video lên.
  • Sự kiện cửa sổ bật lên popoverhide 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ú giải công cụ nội dung cùng dòng chứa nội dung đa phương tiện.

  • Sử dụng [popover=auto] Việc hiển thị một thành phần ẩn các thành phần khác vì chúng không phải là thành phần gốc.
  • Hiển thị trên pointerenter bằng JavaScript.
  • Một ứng dụng hoàn hảo khác cho CSS Anchoring API.

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

  • Sử dụng [popover=auto] để đóng nhẹ.
  • Sử dụng autofocus để đặt tiêu điểm vào 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 mà bạn chỉ muốn hiển thị một ::backdrop.

  • Sử dụng JavaScript để duy trì danh sách cửa sổ bật lên có thể nhìn thấy.
  • Á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.

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

Bản minh hoạ này cho biết cách sử dụng popover để quảng bá canvas lên lớp trên cùng và sử dụng thành phần này để hiển thị con trỏ tuỳ chỉnh.

  • Tăng 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 thị cửa sổ bật lên canvas để đảm bảo cửa sổ này nằm ở trên cùng.

Cửa sổ bật lên của bảng hành độ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 trang 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 cửa sổ bật lên.
  • Khi hiển thị, cửa sổ bật lên sẽ được chuyển lên lớp trên cùng và được dịch thành chế độ xem.
  • Bạn có thể sử dụng tính năng đóng đèn để trả lại dữ liệu.

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

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 kiểu bảng lệnh.

  • Sử dụng tổ hợp phím cmd + j để hiển thị cửa sổ bật lên.
  • input được lấy tiêu điểm bằng autofocus.
  • Hộp kết hợp là popover thứ hai nằm bên dưới dữ liệu đầu vào chính.
  • Thao tác đóng nhẹ sẽ đóng bảng màu nếu không có trình đơn thả xuống.
  • Một ứng viên khác cho Anchoring API

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

Bản minh hoạ này cho thấy một cửa sổ bật lên khi 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 thị một cửa sổ đăng xuất.

  • Sử dụng JavaScript để hiển thị cửa sổ bật lên sau một khoảng thời gian không hoạt động.
  • Khi cửa sổ bật lên hiển thị, hãy đặt lại đồng hồ hẹn giờ.

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 ngẫu hứng vào trang web của mình và thêm trình bảo vệ màn hình.

  • Sử dụng JavaScript để hiển thị cửa sổ bật lên sau một khoảng thời gian không hoạt động.
  • Bỏ qua ánh sáng để ẩn và đặt lại bộ hẹn giờ.

Theo dõi con nháy

Bản minh hoạ này cho thấy cách bạn có thể tạo một cửa sổ bật lên theo con trỏ nhập.

  • Hiển thị cửa sổ bật lên dựa trên lựa chọn, sự kiện nhấn phím hoặc nhập 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.
  • Bạn cần cân nhắc kỹ nội dung hiển thị và khả năng hỗ trợ tiếp cận khi sử dụng mẫu này.
  • Bạn thường thấy biểu tượng này trong giao diện người dùng chỉnh sửa văn bản và các ứng dụng mà 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 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à mục tiêu của nút chính.
  • Mở trình đơn bằng popovertoggletarget.
  • Sử dụng autofocus để đặt tiêu điểm vào mục trình đơn đầu tiên đang hiển thị.
  • Thao tác đóng nhẹ sẽ đóng trình đơn.
  • Thao tác xoay biểu tượng 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à giới thiệu về cửa sổ bật lên, sắp ra mắt trong sáng kiến Giao diện người dùng mở. Nếu được sử dụng một cách hợp lý, đây sẽ là một tính năng bổ sung tuyệt vời cho nền tảng web.

Hãy nhớ xem phần Giao diện người dùng mở. Nội dung giải thích về cửa sổ bật lê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!

Ảnh chụp của Madison Oren trên Unsplash