Przedstawiamy interfejs API popover

Pop-upy są wszędzie w internecie. Możesz je zobaczyć w menu, podpowiedziach i oknach dialogowych, które mogą mieć postać ustawień konta, widżetów informacji dodatkowych i podglądów kart produktów. Pomimo powszechności tych komponentów ich tworzenie w przeglądarkach jest nadal zaskakująco kłopotliwe. Musisz dodać skrypty do zarządzania fokusem, stanami otwarcia i zamknięcia, dostępne elementy w komponentach oraz przypisania klawiszy do wchodzenia do okna i wychodzenia z niego. Wszystko to musisz zrobić, zanim zaczniesz tworzyć przydatną, unikalną i podstawową funkcję okna wyskakującego.

Aby rozwiązać ten problem, wprowadziliśmy w przeglądarkach nowy zestaw deklaratywnych interfejsów API HTML do tworzenia wyskakujących okienek, zaczynając od interfejsu popover w wersji Chromium 114.

Atrybut popover

Zamiast samodzielnie zarządzać wszystkimi złożonymi funkcjami, możesz pozwolić przeglądarce zająć się tym za Ciebie za pomocą atrybutu popover i kolejnych funkcji. Obsługa wyskakujących okienek HTML:

• Promocja do warstwy najwyższej. Pop-upy będą wyświetlane na osobnej warstwie nad resztą strony, więc nie musisz się przejmować kolejnością nakładania elementów.
• Funkcja szybkiego zamykania Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie fokusu.
• Domyślne zarządzanie punktem ostrości. Po otwarciu wyskakującego okienka następny przystanek będzie znajdować się w wyskakującym okienku.
• Dostęp do skrótów klawiszowych. Naciśnięcie klawisza esc spowoduje zamknięcie wyskakującego okienka i przywrócenie fokusu.
• Dostępne powiązania komponentów. Element popover połączony z aktywatorem popover semantycznie.

Teraz możesz tworzyć wyskakujące okienka z tymi wszystkimi funkcjami bez użycia JavaScriptu. Podstawowy pop-up wymaga 3 elementów:

• Atrybut popover elementu zawierającego wyskakujące okienko.
• id w elemencie zawierającym wyskakujące okienko.
• popovertarget z wartością id elementu, który otwiera wyskakujące okienko, w elemencie, który otwiera wyskakujące okienko.

<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Teraz masz w pełni funkcjonalny podstawowy wyskakujący komunikat.

Ten wyskakujący element może służyć do przekazywania dodatkowych informacji lub jako widżet informacji.

Ustawienia domyślne i zastępcze

Domyślnie, np. w poprzednim fragmencie kodu, skonfigurowanie wyskakującego okienka za pomocą popovertarget oznacza, że przycisk lub element, który otwiera wyskakujące okienko, będzie je otwierał i zamykał. Możesz też tworzyć okna wyskakujące za pomocą elementu popovertargetaction. Zastąpi to domyślne działanie przełączania. Opcje popovertargetaction:

popovertargetaction="show": wyświetla wyskakujące okienko. popovertargetaction="hide": ukrywa wyskakujące okienko.

Za pomocą popovertargetaction="hide" możesz utworzyć przycisk „Zamknij” w wyskakującym okienku, jak w tym fragmencie kodu:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Automatyczne i ręczne wyskakujące okienka

Użycie samego atrybutu popover jest w istocie skrótem dla atrybutu popover="auto". Po otwarciu domyślne popover spowoduje przymusowe zamknięcie innych automatycznych wyskakujących okienek, z wyjątkiem okienek otwierających się w tle. Można je zamknąć za pomocą przycisku zamknięcia lub przycisku zamknięcia z efektem zanikania.

Z kolei ustawienie popover=manual powoduje wyświetlenie innego typu wyskakującego okienka: ręcznego. Nie powodują przymusowego zamknięcia żadnego innego typu elementu i nie można ich zamknąć za pomocą gestu odrzucenia. Musisz je zamknąć za pomocą minutnika lub wyraźnego działania. Typy wyskakujących okienek odpowiednich dla popover=manual to elementy, które pojawiają się i znikają, ale nie powinny wpływać na pozostałą część strony, np. powiadomienie w formie toastu.

Jeśli obejrzysz powyższy pokaz, zauważysz, że kliknięcie poza obszarem wyskakującego okienka nie powoduje jego zamknięcia. Dodatkowo, jeśli były otwarte inne wyskakujące okienka, nie byłyby one zamykane.

Aby sprawdzić różnice:

Wyskakujące okienka z popover=auto:

• Po otwarciu zmusza do zamknięcia innych wyskakujących okienek.
• Można zamknąć.

Wyskakujące okienka z popover=manual:

• Nie zamykaj na siłę żadnych innych typów elementów.
• Nie zamykaj okna. Zamknij je za pomocą przełącznika lub akcji zamknięcia.

Stylowanie wyskakujących okienek

Do tej pory omawialiśmy podstawowe okienka w HTML. popover zawiera też jednak kilka ciekawych funkcji stylizacji. Jedną z nich jest możliwość stylizowania ::backdrop.

W przypadku auto jest to warstwa bezpośrednio pod najwyższą warstwą (w której znajduje się wyskakujące okienko), która leży nad resztą strony. W tym przykładzie element ::backdrop ma kolor półprzezroczysty:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

Różnica między popover a dialog

Pamiętaj, że atrybut popover sam w sobie nie zapewnia semantyki. Chociaż teraz możesz tworzyć interfejsy podobne do modalnych dialogów za pomocą popover="auto", istnieją między nimi pewne kluczowe różnice:

Element dialog otwierany za pomocą dialog.showModal (okno modalne) wymaga wyraźnej interakcji użytkownika, aby zamknąć okno. popover obsługuje funkcję light-dismiss. Okno modalne dialog nie jest wyświetlane. Okno modalne unieczynnia pozostałą część strony. popover tego nie robi.

Powyższe demo to dialog semantyczny z pop-upem. Oznacza to, że reszta strony nie jest nieaktywna i wyskakujące okienko zachowuje się jak okienko z lekkim odrzuceniem. Aby utworzyć to okno dialogowe z pop-up, użyj tego kodu:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

Wkrótce

Interaktywne wejście i wyjście

W przeglądarkach nie można jeszcze animować właściwości dyskretnych, w tym display: none i animacji do i z najwyższej warstwy. Są one jednak zaplanowane w przyszłej wersji Chromium, która zostanie opublikowana wkrótce po tej aktualizacji.

Dzięki możliwości animowania właściwości dyskretnych i użyciu właściwości :popover-open i @starting-style możesz skonfigurować style przed i po zmianie, aby umożliwić płynne przejścia podczas otwierania i zamykania wyskakujących okienek. Weźmy poprzedni przykład. Animacja w przybliżeniu i oddaleniu wygląda znacznie płynniej i w większym stopniu sprzyja wygodzie użytkowników:

Umieszczenie kotwicy

Pop-upy są przydatne, gdy chcesz umieścić alert, modal lub powiadomienie na podstawie widoku. Pop-upy są też przydatne w przypadku menu, etykiet narzędzia i innych elementów, które trzeba umieścić względem innych elementów. Właśnie w tym przypadku przydaje się osadzanie w CSS.

W tym demonstracyjnym menu radialnym interfejs API popovera jest używany razem z pozycjonowaniem kotwicy CSS, aby zapewnić, że #menu-items będzie zawsze przypięta do swojego przełącznika, czyli przycisku #menu-toggle.

Konfigurowanie kotwic jest podobne do konfigurowania wyskakujących okienek:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

Aby skonfigurować kotwicę, nadaj jej id (w tym przykładzie #menu-toggle), a następnie użyj anchor="menu-toggle", aby połączyć te 2 elementy. Teraz możesz użyć anchor() do nadania stylu wyskakującemu menu. Wyśrodkowane menu wyskakujące zakotwiczone na linii bazowej przełącznika kotwicy może mieć taki styl:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Teraz masz w pełni funkcjonalne menu wyskakujące, które jest zakotwiczone do przycisku przełącznika i zawiera wszystkie wbudowane funkcje menu wyskakującego. Nie wymaga to JavaScriptu.

Podsumowanie

Interfejs popover API to pierwszy krok w drodze do wprowadzenia serii nowych funkcji, które ułatwią tworzenie aplikacji internetowych i zwiększą ich dostępność. Cieszę się, że używasz wyskakujących okienek.

Dodatkowe materiały

• Okna dialogowe i wyskakujące okna są podobne. Czym się różnią?
• Semantyka i atrybut popover
• Dokumentacja MDN w wyskakującym okienku
• Wyjaśnienie dotyczące wyskakującego okienka OpenUI