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
escspowoduje 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
popoverw elemencie zawierającym okienko wyskakujące. idw elemencie zawierającym wyskakujące okienko.- Wartość
popovertargetz wartościąidwyskakują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.