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 các 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 việc này, chúng tôi đang cố gắng giải quyết các mẫu có vấn đề mà nhà phát triển gặp phải. Chúng tôi có thể thực hiện đ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 Giao diện người dùng mở là "Cửa sổ bật lên".

Video quảng cáo dạng video ngắn nổi tiếng khá trái chiều trong một thời gian dài. Điều này một phần là do cách chúng được xây dựng và triển khai. Loại quảng cáo này không phải là mẫu dễ để xây dựng hiệu quả, nhưng có thể mang lại rất 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 người dùng 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 tạo cửa sổ bật lên:

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

  • Giúp dễ dàng hiển thị một phần tử và các thành phần con của phần tử đó phía trên phần còn lại của tài liệu.
  • Giúp mọi người 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 toàn bộ thông số kỹ thuật của cửa sổ bật lên trên trang web OpenGL.

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

Bây giờ, 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 phía 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ật cờ đó, hãy mở Chrome Canary rồi truy cập chrome://flags. Sau đó, bật cờ "Các tính năng nền tảng web thử nghiệm".

Ngoài ra, chúng tôi cũng cung cấp Bản dùng thử theo nguyên gốc dành cho các 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. 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ợ 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 hình thức khác? Nếu trình duyệt của bạn hỗ trợ HTML này, thì bạn có thể sử dụng phần tử Hộp thoại HTML. Bạn cần dùng mã này ở dạng "Modal". Và việc này yêu cầu JavaScript để sử dụng.

Dialog.showModal();

Có một số điểm cần cân nhắc về khả năng tiếp cận. Bạn nên sử dụng a11y-dialog ví dụ 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ụ hiện có. Nhiều thuật toán 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 phần nội dung để hiển thị cửa sổ bật lên.
  • Tạo kiểu để video 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 giao diện này bằng cách xoá phần tử cửa sổ bật lên khỏi DOM.

Do đó, nhà phát triển cần có thêm phần phụ thuộc và nhiều quyết định để đưa ra quyết định. Ngoài ra, bạn còn phải nghiên cứu để tìm ra sản phẩm cung cấp mọi thứ bạn cần. API Popover hướng đến nhiều trường hợp, bao gồm cả phần chú thích. Mục tiêu là bao gồm tất cả những 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 để 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 diễn 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 hoặc bất cứ thứ gì vì phần tử này sẽ bị ẩn theo mặc định.
  • Bạn không cần phải viết bất kỳ JavaScript nào để làm cho JavaScript xuất hiện. Việc này sẽ do thuộc tính popovertoggletarget xử lý.
  • Khi xuất hiện, quảng cáo sẽ được nâng lên lớp trên cùng. Điều đó có nghĩa là quảng cáo được quảng bá phía trên document trong khung nhìn. Bạn không phải quản lý z-index hoặc lo lắng về vị trí cửa sổ bật lên của mình trong DOM. Mô-đun này có thể được lồng sâu trong DOM, với đối tượng cấp trên cắt bớt. Bạn cũng có thể xem những 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.

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

  • Bạn sẽ thấy tuỳ chọn "Loại bỏ ánh sáng" xuất hiện trong hộp. Điều đó có nghĩa là bạn có thể đóng cửa sổ bật lên bằng tín hiệu gần, 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 sẽ nhận được gì khác với cửa sổ bật lên? Hãy xem ví dụ cụ thể hơn. Hãy xem xét bản minh hoạ này bằng 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ội dung đó được quảng bá phía trên yếu tố vị trí cố định đó. Bạn không cần phải đặt kiểu nào.

Bạn cũng có thể nhận thấy 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 có một phần tử giả ::backdrop có thể tạo kiểu. Ví dụ này tạo kiểu ::backdrop với màu nền alpha giảm và bộ lọc phông nền, làm mờ nội dung cơ bản.

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

Hãy chú ý đến việc 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ị cửa sổ bật lên. Nhưng điều này sẽ không đưa trang web lên lớp trên cùng.

[popover] { display: block; }

Cho dù bạn quảng bá cửa sổ bật lên bằng cách nào, khi bạn đưa cửa sổ bật lên lên lớp trên cùng, bạn có thể cần phải bố trí hoặc định vị cửa sổ bật lên. 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ẽ được bố trí ở giữa khung nhìn bằng cách sử dụng margin: auto. Nhưng trong một số trường hợp, bạn có thể cần phải 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 lưới CSS hoặc flexbox, bạn nên đặt 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 nằm ở lớp trên cùng. Việc đặt thuộc tính này theo mặc định sẽ ghi đè display: none theo mặc định.

[popover]:open {
 display: flex;
}

Nếu đã thử bản minh hoạ đó, bạn sẽ nhận thấy cửa sổ bật lên đang chuyển đổi trong và ra. Bạn có thể chuyển đổi 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ửa sổ bật lên đang hiển thị (và do đó nằm trong 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ẹo ở đây là nhóm các hiệu ứng chuyển đổi và ảnh động theo truy vấn phương tiện cho chuyển động. Việc này cũng có thể giúp duy trì thời gian của bạn. Đ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. Để đóng thông báo, chúng ta sẽ dùng tính năng "Loại bỏ ánh sáng". Tuy nhiên, bạn cũng sẽ nhận được các thuộc tính popovershowtarget và popoverhidetarget mà bạn có thể sử dụng. 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 để 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ể tạo cho mọi 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 mẫu tương tác khác nhau. 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 thiết lập thông qua các tài sản CSS. Các thuộc tính CSS này sẽ xác định khoảng thời gian để di chuột lên và ra khỏi 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ó hiện cửa sổ bật lên sau 0.5s :hover rõ ràng. Sau đó, bạn cần đóng nhẹ hoặc mở một cửa sổ bật lên khác để đóng (Xem thêm thông tin về tính năng này). Điều này 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 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 truyền con trỏ qua 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 để biết cách di chuột qua mục tiêu khi cửa sổ được đặt thành 0.5s.

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

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 về hành vi cửa sổ bật lên nói chung thì sao. Nếu bạn không muốn chọn chế độ "Tắt đèn" thì sao? Hoặc bạn muốn áp dụng mẫu singleton cho cửa sổ bật lên?

API Popover cho phép bạn chỉ định ba loại cửa sổ bật lên khác nhau về hoạt động.

[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ề cửa sổ bật lên cấp trên là:
    • có liên quan theo vị trí DOM (con).
    • 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 đến thuộc tính anchor (API Anchoring CSS đang trong quá trình phát triển).
  • Tắt nhẹ.
  • Thao tác mở sẽ đóng các cửa sổ bật lên khác không phải là cửa sổ bật lên cấp trên. Xem bản minh hoạ bên dưới để nêu bật cách hoạt động của việc lồng ghép 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 sẽ thay đổi mọi thứ như thế nào.
  • Thao tác loại bỏ một đèn sẽ loại bỏ tất cả, còn thao tác loại bỏ một trong ngăn xếp sẽ chỉ loại bỏ các yếu tố phía trên nó trong ngăn xếp.

[popover=manual]:

  • Không đóng các cửa sổ bật lên khác.
  • Không tắt đèn.
  • Yêu cầu loại bỏ 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ửa sổ bật lên của mình, bạn có thể tiếp cận mọi thứ bằng JavaScript. Bạn 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 được chiếu:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

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

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

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

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Bạn không thể huỷ 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 cửa sổ bật lên có ở lớp trên cùng không:

popoverElement.matches(':open')

Tính năng này cung cấp thêm năng lượng cho một số trường hợp ít phổ biến hơn. Ví dụ: hiển thị 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 âm thanh bật lên, 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 thị lại.

Hỗ trợ tiếp cận

Khả năng hỗ trợ tiếp cận là ưu tiên hàng đầu trong quá trình tư duy bằng API Popover. Các mục 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ử điều kiện kích hoạt, nếu cần. Tức 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ử trong cửa sổ bật lên. Việc này giống như hộp thoại, nhưng khác biệt xảy ra khi trả về tiêu điểm và đó là do tính năng loại bỏ ánh sáng. Trong hầu hết 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 một phần tử được nhấp khi tắt ánh sáng, nếu nó có thể lấy tiêu điểm. Hãy xem phần về việc quản lý tiêu điểm trong phần giải thích.

Bạn cần phải 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.

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ử di chuyển xung quanh 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 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 chặn được tâm điểm. Ngoài ra, tính năng di chuyển 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)

Đối với cửa sổ bật lên, một mẫu khó áp dụng là liên kết 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 của nó nhưng tài liệu vẫn được cuộn. Chú giải công cụ đó có thể bị khung nhìn cắt bớt. Hiện có một số sản phẩm JavaScript để giải quyết vấn đề này, chẳng hạn như "Giao diện người dùng nổi". Họ sẽ đặt lại vị trí chú thích để bạn ngăn việc này xảy ra 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 kiểu của bạn. Có một API đồng hành đang được phát triển cùng với API Popover để giải quyết vấn đề này. API "Định vị vị trí 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à điều này sẽ thực hiện việc này theo cách định vị lại các phần tử sao cho chúng không bị khung nhìn cắt bớt.

Bản minh hoạ này sử dụng API neo ở trạng thái hiện tại. Vị trí của thuyền tương ứng với vị trí của neo trong khung nhìn.

Đây là đoạn mã CSS giúp bản minh hoạ này hoạt động. Không yêu cầu 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. API này cũng sẽ có một đoạn mã polyfill.

Ví dụ

Giờ thì bạn đã nắm rõ những đặc điểm và cách thức hoạt động của cửa sổ bật lên, hãy cùng tìm hiểu một số ví dụ cụ thể.

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]
  • Cửa sổ bật lên của chương trình hành động có 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 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.
  • 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 hiển thị.
  • Chúng sẽ bị loại bỏ bằng API ảnh động trên web khi nhấp vào và bị loại bỏ khỏi DOM.
  • Nếu không có thông báo ngắn để hiển thị, cửa sổ bật lên sẽ bị ẩn.

Trình đơn lồng ghép

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.

  • Dùng [popover=auto] vì 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 để di chuyển 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 lưu ý 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" để di chuyển bằng bàn phím.

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

Bản minh hoạ này hướng dẫn cách bạn có thể hiện nội dung đa phương tiện.

  • Sử dụng [popover=auto] để tắt nhẹ.
  • JavaScript 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 kiểu Wiki

Bản minh hoạ này cho bạn biết cách bạn có thể tạo chú giải công cụ về 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 một người sẽ ẩn những người khác vì họ không phải là tổ tiên.
  • Hiển thị trên pointerenter bằng JavaScript.
  • Một ứng cử 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 một cửa sổ bật lên.

  • Sử dụng [popover=auto] để tắt 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, trong đó 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 hiển thị.
  • Á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 lớp này để hiển thị con trỏ tuỳ chỉnh.

  • Chuyển 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 đang mở, hãy ẩn và hiển thị 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 bảng hành động

Bản minh hoạ này cho bạn biết cách 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 ghi đè display.
  • Trang tính đượ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ổ bật lên sẽ được nâng lên lớp trên cùng và được chuyển đổi vào khung hiển thị.
  • Bạn có thể sử dụng chế độ loại bỏ nhẹ để trả về khung hình đó.

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 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 đầu vào chính.
  • Chế độ loại bỏ ánh sáng sẽ đóng bảng màu nếu không có trình đơn thả xuống.
  • Một ứng cử viên khác cho Anchoring API

Cửa sổ bật lên có dấu 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ộ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ị 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 trình chiếu 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 độc đáo 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 dấu nháy

Bản minh hoạ này cho thấy cách bạn có thể có cửa sổ bật lên theo 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 ký tự nhập đặc biệt.
  • 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.
  • Để làm được như vậy, bạn cần suy nghĩ kỹ về nội dung xuất hiện và khả năng tiếp cận.
  • Điều này thường thấ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á 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à mục tiêu của nút chính.
  • Trình đơn được mở bằng popovertoggletarget.
  • Sử dụng autofocus để làm nổi bật mục đầu tiên trong trình đơn.
  • Chế độ tắt ánh sáng sẽ đóng trình đơn.
  • Biểu tượ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à phần giới thiệu về cửa sổ bật lên, một phần của sáng kiến Open UI (Giao diện người dùng mở). Nếu được sử dụng một cách hợp lý, công cụ này sẽ là một sự bổ sung tuyệt vời cho nền tảng web.

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

Cảm ơn bạn đã “bật”!

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