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 mở giao diện người dùng là giúp nhà phát triển dễ dàng tạo ra những trải nghiệm chất lượng cao cho người dùng. Để 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 trên nền tảng tốt hơn.

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

Lâu nay, nhóm nhạc Popover nổi tiếng là sự chia rẽ cực kỳ xấu. 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ẫu đơn giản để xây dựng hiệu quả, 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ố điều nhất định hoặc giúp họ biết đến nội dung trên trang web của bạn, đặc biệt là khi được sử dụng theo cách trang nhã.

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 đặt dòng tiêu đề phía trên phần nội dung còn lại ở vị trí thích hợp.
  • Cách làm cho nội dung dễ tiếp cận (thân thiện với bàn phím, có thể làm tâm đ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 thể là giúp nhà phát triển dễ dàng xây dựng mẫu này. Đáng chú ý trong số những mục tiêu đó là:

  • Giúp dễ dàng hiển thị một phần tử và các phần tử con cháu 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 các hành vi phổ biến nhất (loại bỏ nhẹ, singleton, xếp chồng, v.v.).

Bạn có thể xem đầy đủ thông số kỹ thuật 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 Cửa sổ bật lên tích hợp sẵn ở đâu? Tính năng này được hỗ trợ trong Chrome Canary sau "Các tính năng nền tảng web thử nghiệm" gắn cờ tại thời điểm viết bài.

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

Ngoài ra, còn có Bản dùng thử theo nguyên gốc cho những nhà phát triển muốn thử nghiệm bản dùng thử 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. Hãy nhớ kiểm tra 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 cao hơn mọi thứ khác? Nếu trình duyệt của bạn hỗ trợ tính năng này, bạn có thể sử dụng phần tử Hộp thoại HTML. Bạn sẽ cần dùng tên này trong "Modal" biểu mẫu. Để thực hiện thao tác này, bạn cần có JavaScript.

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 phương pháp trong số này có xu hướng hoạt động theo cách tương tự nhau.

  • Thêm một số vùng chứa vào phần nội dung để hiển thị cửa sổ bật lên.
  • Tạo kiểu sao cho 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 thị cửa sổ bật lên.
  • Ẩn lớp này 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 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 phải nghiên cứu để tìm ra dịch vụ cung cấp mọi thứ bạn cần. API Popover nhằm phục vụ nhiều trường hợp, 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 của bạ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 phải đặt phần tử cửa sổ bật lên vào vùng chứa hay bất kỳ thứ gì khác – phần tử này bị ẩn theo mặc định.
  • Bạn không cần phải viết bất kỳ JavaScript nào để mã xuất hiện. Việc này sẽ do thuộc tính popovertoggletarget xử lý.
  • Khi xuất hiện, hình ảnh sẽ được thăng cấp lên lớp trên cùng. Tức là quảng cáo sẽ được quảng bá phía trên document trong khung nhìn. Bạn không phải quản lý z-index hay lo lắng về vị trí cửa sổ bật lên trong DOM. Nó có thể được lồng sâu trong DOM, với đối tượng cấp trên bị cắt bớt. Bạn cũng có thể xem phần tử nào 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.

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

  • Bạn nhận được tuỳ chọn "Loại bỏ ánh sáng" ra khỏi hộp. Khi đó, bạn có thể đóng cửa sổ bật lên bằng một 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, di chuyển bằng bàn phím đế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 gì khác khi dùng cửa sổ bật lên? Hãy xem thêm ví dụ này. 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 sổ bật lên được lồng trong DOM, nhưng khi bạn mở cửa sổ bật lên, nó sẽ được quảng bá bên trên phần tử vị trí cố định đó. Bạn không cần thiết lập kiểu nào cả.

Bạn cũng có thể nhận thấy cửa sổ bật lên hiện có một 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.

Tạo kiểu 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, 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 đè giá trị này để hiện cửa sổ bật lên. Tuy nhiên, điều đó sẽ không đưa quảng cáo lên lớp trên cùng.

[popover] { display: block; }

Dù bạn quảng bá cửa sổ bật lên theo cách nào, thì khi quảng bá cửa sổ bật lên trên lớp trên cùng, bạn có thể cần phải bố trí hoặc định vị quảng cáo đó. Bạn không thể nhắm mục tiêu 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ẽ xuất hiện ở 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 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 nội dung 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 ở lớp trên cùng. Nếu bạn đặt giá trị này theo mặc định, thì theo mặc định, giá trị này sẽ hiển thị ghi đè display: none.

[popover]:open {
 display: flex;
}

Nếu đã dùng thử bản minh hoạ đó, bạn sẽ nhận thấy cửa sổ bật lên hiện đang chuyển đổi qua lại. Bạn có thể chuyển đổi cửa sổ bật lên và ra khỏi cửa sổ bằng cách sử dụng bộ chọn giả :open. Trình 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. Ngoài ra, 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 giúp bạn giữ đúng thời gian. Đ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 việc sử dụng popovertoggletarget để hiển thị cửa sổ bật lên. Để loại bỏ thông báo này, chúng ta sẽ sử dụng tính năng "Tắt ánh sáng". Tuy nhiên, bạn cũng có thể 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 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 đó, API Popover không chỉ bao gồm khái niệm trước đây về cửa sổ bật lên. Bạn có thể xây dựng ứng dụng cho tất cả các loại tình huống, chẳng hạ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 nhiều kiểu tương tác. Các hoạt động tương tác như di chuột. Việc sử dụng thuộc tính popoverhovertarget đã được thử nghiệm nhưng hiện chưa được 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. Hành vi này có thể được định cấu hình 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ó cửa sổ bật lên sau khi 0.5s rõ ràng là :hover. Sau đó, cần đóng nhẹ hoặc mở một cửa sổ bật lên khác để đóng (Xem thêm về tính năng này sắp tới). Nguyên nhân là do thời lượng ẩn 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 thiết lập 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 đưa 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ố ví dụ và trường hợp sử dụng phổ biến, hãy cùng xem qua một vài thông tin.

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

Chúng tôi đã đề cập đến hành vi tương tác không phải JavaScript. Nhưng về tổng thể cửa sổ bật lên 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ử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à được lồng trong DOM. Định nghĩa 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 (con).
    • có liên quan bằng cách kích hoạt các thuộc tính trên các phần tử con như popovertoggletarget, popovershowtarget, v.v.
    • có liên quan bằng thuộc tính anchor (API neo CSS đang phát triển).
  • Tắt 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 xem bản minh hoạ dưới đây để nêu bật cách hoạt động của việc lồng nhau với cửa sổ bật lên của tổ tiên. 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.
  • Thao tác nhẹ là loại bỏ một kết quả sẽ loại bỏ tất cả, nhưng khi loại bỏ một kết quả trong nhóm ảnh thì chỉ loại bỏ những kết quả nằm phía trên nó trong nhóm ảnh.

[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ể tiếp cận mọi thứ bằng JavaScript. Bạn sẽ nhận được cả phương thức showPopover và hidePopover. Bạn cũng có popovershow và popoverhide sự kiện để nghe:

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 đang hiển thị:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Nghe cửa sổ bật lên đang hiển thị và huỷ việc hiển thị quảng cáo đó:

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

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

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Bạn không thể huỷ việc ẩn cửa sổ bật lên:

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

Kiểm tra xem 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 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ó âm thanh, vì vậy, chúng ta 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 tiếp cận là ưu tiên hàng đầu khi cân nhắc sử dụng API Popover. Ánh xạ hỗ trợ tiếp cận liên kết cửa sổ bật lên với phần tử trình kích hoạt khi 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 cửa sổ bật lên. Thao tác này tương tự như với Hộp thoại, nhưng sự khác biệt xuất hiện khi trả lại tiêu điểm và đó là do loại bỏ ánh sáng. Trong hầu hết các trường hợp, việc đóng cửa sổ bật lên sẽ trả về tiêu điểm cho phần tử được lấy tiêu điểm trước đó. Tuy nhiên, tiêu điểm sẽ được chuyển đến phần tử được nhấp khi tắt nhẹ, nếu có thể lấy tiêu điểm. Hãy xem phần về quản lý tiêu điểm trong thông tin 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 tính năng đó 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ử điều chỉnh giao diện bằng bàn phím. Lưu ý vị trí tiêu điểm được trả về khi 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, thì cửa sổ bật lên đã đóng. Đó là do thiết kế. Mặc dù cửa sổ bật lên có tính năng quản lý tâm điểm, nhưng chúng không khiến bạn tập trung vào được. Đồng thời, thao tác điều hướng bằng bàn phím sẽ xác định một 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ú thích được đặt ở phía trên trình kích hoạt, nhưng người dùng lại cuộn tài liệu. Chú thích đó có thể bị khung nhìn cắt bớt. Hiện có các dịch vụ JavaScript để giải quyết 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 bạn. Có một API đồng hành đang được phát triển cùng với API Cửa sổ bật lên để giải quyết vấn đề này. "Định vị vị trí neo CSS" API sẽ cho phép bạn chia sẻ kết nối các phần tử với các phần tử khác và API 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 thực hiện bản minh hoạ này. 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 tệp 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 cho thấy tính năng "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 hết thời gian chờ 2000ms, hãy ẩn nội dung đó bằng hidePopover.

Bánh mì nướng

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 thuộc loại manual đóng vai trò là vùng chứa.
  • 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ẽ xuất hiện.
  • Các ảnh động này sẽ bị xoá cùng với API ảnh động trên web khi người dùng nhấp vào 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 một trình đơn điều hướng lồng nhau.

  • Sử dụng [popover=auto] vì mã này cho phép 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ạ ở "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 trong 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 theo dõi sự kiện play của video và làm 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ú thích cho nội dung cùng dòng có chứa nội dung nghe nhìn.

  • Sử dụng [popover=auto] Khi bạn hiển thị một người dùng ẩn các nhóm ảnh khác, vì họ không phải là tổ tiên của mình.
  • Hiển thị trên pointerenter bằng JavaScript.
  • Một ứng viên 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 cửa sổ bật lên.

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

  • 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 ở lớp trên cùng.

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

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 mở ra, hãy ẩn và hiện cửa sổ bật lên canvas để đảm bảo cửa sổ đó 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 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 sẽ ghi đè display.
  • Trang tính hành động được mở bằng trình kích hoạt cửa sổ bật lên.
  • Khi cửa sổ bật lên được hiển thị, cửa sổ đó sẽ được quảng bá lên lớp trên cùng và được chuyển vào khung hiển thị.
  • 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 đã kích hoạt 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 cmd + j để hiện cửa sổ bật lên.
  • input lấy tiêu điểm bằng autofocus.
  • Hộp kết hợp là popover thứ hai được đặt bên dưới đầu vào chính.
  • Thao tác đóng bảng theo màu sẽ đóng bảng nếu không có trình đơn thả xuống.
  • Một đề xuất khác cho Anchoring API

Cửa sổ bật lên theo thời gian

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ẫu giao diện người dùng thường dùng trong các ứng dụng chứa thông tin an toàn về người dùng để hiển thị phương thức đă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 chương trình cửa sổ bật lên, 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 ý tưởng bất 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.
  • Tắt đèn để ẩn và đặt lại đồng hồ 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 cửa sổ bật lên khi có con nháy đầu vào.

  • Hiện cửa sổ bật lên dựa trên lựa chọn, sự kiện chính hoặc phương thức nhập ký tự đặc biệt.
  • Hãy sử dụng JavaScript để cập nhật vị trí cửa sổ bật lên bằng các thuộc tính tuỳ chỉnh trong phạm vi.
  • Mẫu này đòi hỏi bạn phải suy nghĩ kỹ lưỡng về nội dung xuất hiện và khả năng tiếp cận.
  • Thẻ này thường xuất hiện trong giao diện người dùng và các ứng dụng chỉnh sửa văn bản 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á cửa sổ bật lên kiểu 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.
  • Trình đơn đang mở bằng popovertoggletarget.
  • Dùng autofocus để lấy tiêu điểm mục đầu tiên trong trình đơn vào chương trình.
  • Thao tác tắt nhanh sẽ đóng trình đơn.
  • Vòng xoắn 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ở. Được sử dụng một cách hợp lý, đây sẽ là một sự bổ sung tuyệt vời cho nền tảng web.

Hãy nhớ xem bài viết Mở giao diện người dùng. Thông báo giải thích về cửa sổ bật lên sẽ được cập nhật liên tục khi API phát triển. Và đây là bộ sưu tập của tất cả bản minh hoạ.

Cảm ơn bạn đã " bất ngờ"!

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