Pudła są wszędzie w sieci. Znajdziesz je w menu, wskazówkach i w oknach dialogowych, które mogą być widoczne jako ustawienia konta, widżety komunikatów lub podgląd kart produktów. Chociaż te komponenty są tak powszechne, tworzenie ich w przeglądarkach jest zaskakująco uciążliwe. Musisz dodać skrypty, by zarządzać skupieniem, otwarciami i zamknięciem, dostępnymi elementami zaczepienia komponentów, powiązaniami klawiszy, które umożliwiają przechodzenie i wychodzenie z doświadczenia – a to wszystko jeszcze przed rozpoczęciem tworzenia przydatnych, niepowtarzalnych i głównych funkcji Twojego wyskakującego okienka.
Aby rozwiązać ten problem, udostępnimy w przeglądarkach nowy zestaw deklaratywnych interfejsów API HTML do tworzenia wyskakujących okienek. Zaczynamy od interfejsu API popover
w Chromium 114.
Atrybut popover
Zamiast zajmować się całą złożonością samodzielnie, możesz pozwolić przeglądarce obsługiwać ją za pomocą atrybutu popover
oraz kolejnych funkcji. Obsługa wyskakujących okienek HTML:
- Awans do najwyższej warstwy. Pokrowce pojawią się na oddzielnej warstwie nad pozostałą częścią strony, dzięki czemu nie musisz zmieniać kolejności nakładania elementów.
- Funkcja lekkiego zamknięcia. Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie zaznaczenia.
- Domyślne zarządzanie ostrością. Otwarcie wyskakującego okienka powoduje, że następna karta zostaje zatrzymana.
- Dostępne powiązania klawiszy. Naciśnięcie klawisza
esc
spowoduje zamknięcie wyskakującego okienka i powrót fokusu. - Dostępne powiązania komponentów. Łączenie elementu wyskakującego z wywołaniem okienka w sposób semantyczny.
Teraz można tworzyć okienka wyskakujące za pomocą wszystkich tych funkcji bez konieczności używania języka JavaScript. Podstawowe wyskakujące okienko wymaga 3 elementów:
- Atrybut
popover
w elemencie zawierającym okienko wyskakujące. id
w elemencie zawierającym wyskakujące okienko.- Wartość
popovertarget
z wartościąid
wyskakującego okienka w elemencie, który go otwiera.
<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
Masz teraz w pełni funkcjonalne okienko wyskakujące.
Wyskakujące okienko może służyć do przekazywania dodatkowych informacji lub jako widżet komunikatu.
Domyślne i zastąpienia
Domyślnie, tak jak w poprzednim fragmencie kodu, skonfigurowanie wyskakującego okienka z elementem popovertarget
oznacza, że przycisk lub element, który go otworzy, spowoduje jego otwarcie i zamknięcie. Bezpośrednie okienka wyskakujące można jednak również tworzyć za pomocą popovertargetaction
. Zastępuje to domyślne działanie przełączania. Opcje popovertargetaction
obejmują:
popovertargetaction="show"
: pokazuje wyskakujące okienko.
popovertargetaction="hide"
: ukrywa wyskakujące okienko.
Korzystając z popovertargetaction="hide"
, możesz utworzyć przycisk „zamknij” w wyskakującym okienku, jak w tym fragmencie:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
Wyskakujące okienka – automatyczne a ręczne
Samo użycie atrybutu popover
jest w rzeczywistości skrótem do strony popover="auto"
. Po otwarciu domyślny popover
wymusza zamknięcie innych automatycznych okien, z wyjątkiem wyskakujących okienek elementów nadrzędnych. Można ją zamknąć za pomocą lampki lub przycisku zamykania.
Z kolei ustawienie popover=manual
powoduje utworzenie kolejnego typu wyskakującego okienka: wyskakującego okienka ręcznego. Nie wymuszają one zamknięcia innych typów elementów i nie zamykają go przez zamknięcie świateł. Musisz je zamknąć za pomocą licznika czasu lub jednoznacznego działania zamknięcia. Typy wyskakujących okienek dla popover=manual
to elementy, które pojawiają się i znikają, ale nie powinny mieć wpływu na pozostałą część strony, np. powiadomienie toast.
Po zastanowieniu widać, że kliknięcie poza obszarem pop-over nie powoduje jego zamknięcia. Poza tym gdyby były otwarte inne wyskakujące okienka, nie dałoby się ich zamknąć.
Aby przejrzeć różnice:
Popuki z popover=auto
:
- Po otwarciu wymuś zamknięcie innych okien pop-over.
- Może łatwo go zamknąć.
Popuki z popover=manual
:
- Nie wymuszaj zamknięcia elementów innego typu.
- Nie ignoruj światła. Możesz je zamknąć za pomocą przełącznika lub przycisku zamykania.
Wyskakujące okienka stylu
Omówiliśmy już podstawowe elementy wyskakujące w języku HTML. popover
oferuje też jednak kilka fajnych funkcji stylistycznych. Jednym z nich jest możliwość określania stylu elementu ::backdrop
.
W wyskakujących okienkach auto
jest to warstwa znajdująca się bezpośrednio pod górną warstwą (tam, gdzie znajduje się okienko popover), która znajduje się nad pozostałą częścią strony. W tym przykładzie do kolumny ::backdrop
został przypisany kolor półprzezroczysty:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
Różnica między popover
a dialog
Pamiętaj, że atrybut popover
nie określa semantyki samodzielnie. Chociaż za pomocą popover="auto"
możesz teraz tworzyć środowisko modalne podobne do okien, jest między nimi kilka kluczowych różnic:
Element dialog
otwarty za pomocą dialog.showModal
(okna modalne) to doświadczenie, które wymaga wyraźnej interakcji użytkownika w celu zamknięcia okna.
popover
obsługuje odrzucanie świateł. Moduł dialog
nie działa.
Okno modalne powoduje, że reszta strony jest bezwładna. popover
nie.
Powyższa wersja demonstracyjna to semantyczne okno z wyskakującym okienkiem. Oznacza to, że reszta strony nie jest bezwładna, a okno wyskakujące przez okienko jest ignorowane. Możesz utworzyć to okno z zachowaniem wyskakujących okienek, korzystając z 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 otwieranie i zamykanie
Przeglądarki nie mogą jeszcze animować właściwości dyskretnych, w tym animowania do i z display: none
oraz do i z górnej warstwy. Są one jednak planowane na nadchodzącą wersję Chromium, tuż po tej wersji.
Dzięki możliwości animowania dyskretnych właściwości oraz korzystaniu z elementów :popover-open
i @starting-style
możesz skonfigurować style przed zmianą i po niej, aby uzyskać płynne przejścia podczas otwierania i zamykania okien pop-over. Spójrzmy na poprzedni przykład. Animowane animacje wyglądają znacznie płynniej i są bardziej płynne w obsłudze.
Pozycjonowanie zakotwiczonych
Popovers świetnie sprawdzają się, gdy chcesz umieścić alert, okno modalne lub powiadomienie na podstawie widocznego obszaru. Wyskakujące okienka są też przydatne w przypadku menu, etykiet i innych elementów, które muszą być umiejscowione względem innych elementów. Właśnie tu do akcji wkracza kotwica CSS.
Poniższa prezentacja demonstracyjna menu korzysta z interfejsu API popover i pozycjonowania zakotwiczonego CSS, aby zapewnić, że wyskakujące okienko #menu-items
jest zawsze zakotwiczone w połączeniu z wyzwalaczem przełącznika (przyciskiem #menu-toggle
).
Ustawianie reklam zakotwiczonych przypomina ustawianie 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ć reklamę zakotwiczoną, nadaj jej właściwość id
(w tym przykładzie: #menu-toggle
), a potem za pomocą anchor="menu-toggle"
połącz 2 elementy. Teraz możesz użyć elementu anchor()
, aby określić styl wyskakującego okienka. Styl wyśrodkowanego wyskakującego menu, które jest zakotwiczone na podstawie podstawy przełącznika kotwicy, może mieć następujący styl:
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
Teraz masz w pełni funkcjonalne menu podręczne, które jest zakotwiczone w przycisku przełączania i zawiera wszystkie wbudowane funkcje wyskakującego okienka, bez konieczności użycia JavaScriptu.
Podsumowanie
Interfejs popover API to pierwszy krok z serii nowych funkcji ułatwiających zarządzanie tworzeniem aplikacji internetowych i ułatwiających ich dostępność. Ciekawe, jak używacie wyskakujących okienek.