Wyskakujące okienko i okno

Wyskakujące okienko to dowolny element z atrybutem popover. Jest przydatne w przypadku wielu interaktywnych wzorców, w tym etykietek, alertów, powiadomień i innych.

<div id="my-popover" popover>My popover content</div>

Atrybut popover domyślnie ukrywa element, więc musisz zapewnić użytkownikom możliwość jego otwarcia. Wyskakujące okienka są umieszczane na najwyższej warstwie, nad całą inną zawartością, ale nie są modalne. Oznacza to, że nadal możesz wchodzić w interakcje z treściami poza wyskakującym okienkiem.

Sterowanie wyskakującymi okienkami

Zanim omówimy różne rodzaje wyskakujących okien i ich działanie, zobacz, jak je otwierać i zamykać.

deklaratywnie,

Elementami wyskakującymi można sterować w całości w HTML-u bez użycia JavaScriptu za pomocą przycisków (i pól wejściowych z atrybutem button) oraz atrybutu popovertarget.

W wyskakującym okienku w poprzednim fragmencie kodu wartość id wynosi my-popover. Możesz użyć tej wartości, aby odwołać się do wyskakującego okienka.

<button popovertarget="my-popover">Toggle</button>

Możesz też określić, czy przycisk ma otwierać czy zamykać wyskakujące okienko, używając atrybutów popovertargetaction="show" i popovertargetaction="hide".

Z JavaScriptem

Możesz też sterować wyskakującym okienkiem za pomocą JavaScriptu. Jest to przydatne, gdy chcesz wyświetlić wyskakujące okienko w odpowiedzi na coś innego niż kliknięcie przycisku przez użytkownika. Aby to zrobić, musisz pobrać element wyskakującego okienka, a następnie wywołać funkcję showPopover(), hidePopover() lub togglePopover().

Rodzaje wyskakujących okienek

Gdy dodajesz do witryny wyskakujące okienko, musisz wziąć pod uwagę wiele interakcji. Jak się otwiera? Jak użytkownicy mogą go zamknąć? Co się stanie z innymi otwartymi wyskakującymi okienkami? Istnieją 3 rodzaje wyskakujących okienek. Możesz wybrać typ, który zapewnia zachowanie i interakcje wymagane w Twoim przypadku użycia.

Automatyczne wyskakujące okienka

Automatyczne wyskakujące okienka mają najwięcej wbudowanych funkcji i są domyślnym typem, jeśli nie określisz innego.

<div id="popover" popover>My popover</div>

W wielu przypadkach nie chcesz, aby kilka wyskakujących okienek było otwartych w tym samym czasie, więc automatyczne wyskakujące okienka zamykają inne automatyczne wyskakujące okienka, gdy są otwierane. Obsługują też „lekkie zamykanie”, co oznacza, że jeśli klikniesz poza wyskakującym okienkiem, zamknie się ono automatycznie. Możesz też zamknąć go za pomocą klawisza Esc.

Ręczne wyskakujące okienka

Automatyczne wyskakujące okienka obejmują wiele przypadków użycia, ale w niektórych sytuacjach możesz potrzebować większej kontroli nad nimi. W przypadku wyskakujących okienek wywoływanych ręcznie masz większą kontrolę, ale też ponosisz większą odpowiedzialność za ich działanie.

<div id="popover" popover="manual">My popover</div>

To wyskakujące okienko zamknie się tylko wtedy, gdy je zamkniesz. Nie można go zamknąć przez kliknięcie poza nim ani naciśnięcie klawisza Esc. Umożliwia jednak otwieranie kilku wyskakujących okien jednocześnie.

Wyskakujące okienka z podpowiedziami

Możesz też używać wyskakujących okienek, aby dodawać do strony etykietki. W tym wzorcu chcesz mieć możliwość najechania kursorem na element i wyświetlenia jego opisu. W danym momencie powinna być otwarta tylko jedna z nich. Jeśli używasz automatycznych wyskakujących okienek, otwarcie jednego z nich spowoduje zamknięcie wszystkich innych otwartych automatycznych wyskakujących okienek. Jeśli używasz ręcznych wyskakujących okien, musisz ręcznie wdrożyć wiele funkcji, w tym zamykanie innych wyskakujących okien. Wyskakujące okienka z podpowiedziami stanowią trzecią opcję o działaniu podobnym do automatycznych wyskakujących okienek. Otwarcie wyskakującego okienka z podpowiedzią nie powoduje jednak zamknięcia automatycznie otwieranych wyskakujących okienek.

<div id="popover" popover="hint">My popover</div>

Wyskakujące okienka z podpowiedziami są przydatne w przypadku informacji dodatkowych, które są drugorzędne w stosunku do treści podstawowych. Podpowiedzi często wyświetlają się w odpowiedzi na zdarzenia inne niż kliknięcia, np. najechanie kursorem lub skupienie.

Pozycjonowanie wyskakującego okienka

Domyślnie wyskakujące okienka będą otwierać się na środku ekranu. Są one dodawane do najwyższej warstwy, nad wszystkimi innymi treściami, i można je pozycjonować względem widocznego obszaru.

Nie zawsze jest to idealne rozwiązanie, ponieważ często chcesz umieścić wyskakujące okienko w pobliżu elementu, który je wywołuje. Umiejscowienie kotwicy umożliwia to.

Pozycjonowanie zakotwiczone składa się z 2 etapów: zdefiniowania elementu zakotwiczonego i umieszczenia elementu względem tego elementu. Wyskakujące okienka mogą wykonać pierwszy krok, ustawiając dla Ciebie domyślny element zakotwiczenia. Gdy otworzysz wyskakujące okienko za pomocą <button popovertarget>, przycisk będzie niejawną kotwicą. Jeśli otwierasz wyskakujące okienko za pomocą JavaScriptu, możesz ustawić domyślny element zakotwiczenia za pomocą opcji source.

Domyślnie wyskakujące okienko jest wyśrodkowane za pomocą margin: auto. Aby użyć pozycjonowania względem elementu zakotwiczonego, prawdopodobnie trzeba będzie zastąpić to ustawienie, ustawiając wartość margin: unset.

Style i animacje

Pseudoelement ::backdrop

Wyskakujące okienka otwierają się w warstwie najwyższej, nad całą pozostałą treścią na stronie. Pod wyskakującym okienkiem znajduje się pseudoelement ::backdrop, który można ostylować.

Warto pamiętać, że treści poza wyskakującym okienkiem nie są nieaktywne – nadal możesz klikać przyciski i poruszać się po stronie za pomocą klawiatury. Nie należy zasłaniać zawartości strony, np. stosując silny efekt rozmycia lub ustawiając nieprzezroczyste tło.

Pseudoklasa :popover-open

Załóżmy, że chcesz rozmieścić treść wyskakującego okienka za pomocą siatek CSS. Dodajesz [popover]{ display: grid } i nagle wszystkie wyskakujące okienka stają się widoczne. Dzieje się tak, ponieważ wyskakujące okienka są ukrywane za pomocą display: none. Możesz użyć pseudoklasy :popover-open, aby zastosować style tylko wtedy, gdy wyskakujące okienko jest otwarte.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open przydaje się też podczas animowania wyskakującego okienka.

Animowanie wyskakujących okienek

Animacja wyskakującego okienka składa się z 3 kroków:

1. @starting-style {popover:popover-open { } } – początkowe style wyskakującego okienka, gdy tylko stanie się widoczne. Pamiętaj, że musisz zdefiniować to w arkuszu stylów po kroku 2.
2. popover:popover-open { }-Style wyskakującego okienka, gdy jest otwarte.
3. popover { }-The styles the popover goes to as it closes.

Gdy wyskakujące okienko nie jest otwarte, jest ukryte za pomocą elementu display: none. Aby to animować, musisz ustawić transition-behavior: allow-discrete, a także dodać display do listy właściwości w transition.

Jeśli pozycjonujesz wyskakujące okienko za pomocą niejawnego elementu zakotwiczenia, musisz też dodać overlay do listy właściwości w transition. Po usunięciu wyskakującego okienka z najwyższej warstwy niejawna relacja elementu zakotwiczonego zostaje usunięta, więc dodanie przejścia do właściwości overlay opóźnia to do czasu zakończenia przejścia wyjścia.

Interakcje między wyskakującymi okienkami

Na stronie prawdopodobnie będzie wiele wyskakujących okienek, a sposób ich interakcji zależy od ich typu i sposobu użycia.

Zagnieżdżone wyskakujące okienka

W niektórych przypadkach może być konieczne otwarcie wyskakującego okienka w innym wyskakującym okienku. Może to być na przykład menu wysuwane, w którym jeden z elementów otwiera podmenu. Gdy użytkownik zamknie menu główne, nie chcesz, aby podmenu pozostało otwarte. W tym celu możesz użyć wyskakujących okienek.

Jeśli otwierasz wyskakujące okienko z podpowiedzią z innego wyskakującego okienka z podpowiedzią lub automatycznie otwierane wyskakujące okienko z innego automatycznie otwierane wyskakujące okienko, okienka te są umieszczane w stosie. Zamknięcie wyskakującego okienka powoduje też zamknięcie wszystkich wyskakujących okienek znajdujących się za nim w stosie. Działa to też w przypadku lekkiego zamykania – jeśli klikniesz wyskakujące okienko, wszystkie wyskakujące okienka znajdujące się za nim w stosie zostaną zamknięte, ale wcześniejsze pozostaną otwarte.

Wyskakujące okienko jest dodawane do stosu, jeśli jego element źródłowy znajduje się w wyskakującym okienku. Element źródłowy jest ustawiany automatycznie, gdy używasz elementu popovertarget na przycisku lub za pomocą JavaScriptu, ustawiając opcję source podczas wywoływania funkcji .showPopover({source}) lub .togglePopover({source}).

Istnieje stos automatycznych wyskakujących okienek i osobny stos wyskakujących okienek z podpowiedziami. Jeśli jednak otworzysz wyskakujące okienko z podpowiedzią w automatycznie wyświetlanym wyskakującym okienku, zostanie ono dodane do automatycznego stosu.

Pamiętaj, że wyskakujące okienka z podpowiedziami są przeznaczone do prostych, tymczasowych informacji, więc nie możesz wywołać automatycznego wyskakującego okienka z wyskakującego okienka z podpowiedziami.

Jeśli używasz ręcznie wyświetlanych wyskakujących okien, musisz zarządzać tym wszystkim ręcznie.

Zamykanie innych typów wyskakujących okien

Wiesz już, że otwarcie automatycznego wyskakującego okienka zamyka inne automatyczne wyskakujące okienka, ale jak różne typy okienek wchodzą ze sobą w interakcję? Przyjrzyjmy się temu na przykładzie strony, która używa wszystkich 3 rodzajów. Menu nawigacyjne zawiera przyciski, które otwierają i zamykają automatyczne wyskakujące okienka. Na stronie znajduje się tekst, który wykorzystuje wyskakujące okienka z podpowiedziami do wyświetlania kontekstowych etykietek. Na koniec pojawia się wyskakujące okienko z powiadomieniem o zakończeniu zadania w tle.

Etykietki są tymczasowe i wyświetlają się po najechaniu wskaźnikiem myszy na tekst. Oczekujemy, że w danym momencie będzie widoczny tylko jeden element podpowiedzi, a wyświetlenie drugiego spowoduje zamknięcie pierwszego.

Gdy otworzysz menu, klikając przycisk, podpowiedź zamknie się z 2 powodów: Najpierw kliknięcie poza podpowiedzią powoduje jej zamknięcie. Po drugie, otwarcie automatycznie wyświetlanego wyskakującego okienka zamyka wszystkie otwarte wyskakujące okienka z podpowiedziami. Dzieje się tak, ponieważ użytkownik zmienił obszar, na którym się skupia, a treści ulotne w wyskakującym okienku z podpowiedzią nie są już istotne. Oznacza to, że jeśli wywołasz showPopover() w automatycznie wyświetlanym wyskakującym okienku, wszystkie otwarte wyskakujące okienka z podpowiedziami zostaną zamknięte.

Menu są wyświetlane automatycznie. W przypadku menu rozwijanych oczekujesz, że tylko jedno będzie otwarte naraz, a otwarcie jednego zamyka drugie. Jak widzisz, otwarcie automatycznego wyskakującego okienka powoduje też zamknięcie wszystkich otwartych wyskakujących okienek z podpowiedziami.

Gdy menu jest otwarte, możesz jednak chcieć wyświetlić treść niepowiązanego z nim dymku. Wyświetlenie podpowiedzi nie zamyka automatycznie wyskakujących okienek.

Na wyskakujące okienko wywoływane ręcznie nie mają wpływu wyskakujące okienka wywoływane automatycznie ani wyskakujące okienka z podpowiedziami. Gdy się otworzy, nie zamyka żadnych wyskakujących okienek z podpowiedziami ani wyskakujących okienek wywoływanych automatycznie. Jeśli jednak otworzysz ręcznie wyskakujące okienko, klikając przycisk, spowoduje to lekkie zamknięcie podpowiedzi i automatycznie otwieranych wyskakujących okienek.

Interakcje między typami wyskakujących okien mogą wydawać się złożone, ale w odpowiednich sytuacjach umożliwiają typowe wzorce użytkowania. Jeśli wyskakujące okienka nie działają zgodnie z oczekiwaniami, sprawdź, jakich typów używasz.

Sprawdź swoją wiedzę