Celem inicjatywy dotyczącej otwartego interfejsu użytkownika jest ułatwienie deweloperom tworzenia wrażeń dla użytkowników. Aby to osiągnąć, staramy się rozwiązać problemy związane z bardziej problematycznymi wzorami, z którymi borykają się deweloperzy. Możemy to osiągnąć, oferując lepsze, wbudowane interfejsy API i komponenty.
Jednym z takich obszarów problemowych są wyskakujące okienka, które w interfejsie Open UI są nazywane „wyskakującymi”.
Od dawna mają raczej mieszane opinie. Wynika to częściowo ze sposobu ich tworzenia i wdrażania. Nie jest to łatwy do stworzenia wzór, ale może on przynieść wiele korzyści, ponieważ kieruje użytkowników do określonych treści lub informuje ich o ich istnieniu w Twojej witrynie – zwłaszcza gdy jest to zrobione w smaczny sposób.
Podczas tworzenia wyskakujących okienek często pojawiają się 2 główne problemy:
- jak upewnić się, że zostanie ona umieszczona nad resztą treści w odpowiednim miejscu.
- Jak ułatwić dostęp do treści (np. czytelne dla osób korzystających z klawiatury).
Wbudowany interfejs API okna wyskakującego ma różne cele, ale wszystkie mają ten sam ogólny cel, czyli ułatwienie programistom tworzenia tego wzorca. Do najważniejszych z nich należą:
- Ułatwić wyświetlanie elementu i jego potomków nad resztą dokumentu.
- Zadbaj o przystępność.
- Nie wymagają JavaScriptu w przypadku większości typowych zachowań (lekkie zamknięcie, pojedynczy element, układanie itp.).
Pełną specyfikację wyskakujących okienek znajdziesz na stronie OpenUI.
Zgodność z przeglądarką
Gdzie można teraz używać wbudowanego interfejsu Popover API? W chwili pisania tych informacji jest ona obsługiwana w Chrome Canary za pomocą flagi „Experimental web platform features” (Eksperymentalne funkcje platformy internetowej).
Aby włączyć tę flagę, otwórz Chrome Canary i wejdź na stronę chrome://flags. Następnie włącz flagę „Eksperymentalne funkcje platformy internetowej”.
Dla deweloperów, którzy chcą przetestować Origin w środowisku produkcyjnym, dostępna jest też wersja próbna Origin.
W trakcie tworzenia jest też polyfill dla interfejsu API. Sprawdź repozytorium github.com/oddbird/popup-polyfill.
Obsługę wyskakujących okienek możesz sprawdzić:
const supported = HTMLElement.prototype.hasOwnProperty("popover");
Bieżące rozwiązania
Co możesz zrobić, aby promować swoje treści na tle innych materiałów? Jeśli Twoja przeglądarka go obsługuje, możesz użyć elementu okna HTML. Musisz użyć go w formie „Okno modalne”. Do tego wymagany jest JavaScript.
Dialog.showModal();
Należy wziąć pod uwagę pewne ułatwienia dostępu. Zalecamy użycie a11y-dialog, jeśli np. chcesz uwzględnić użytkowników Safari w wersji niższej niż 15.4.
Możesz też użyć jednej z wielu bibliotek, które zawierają okienka, alerty lub etykietki. Wiele z nich działa w podobny sposób.
- Dodaj do treści kontener, aby wyświetlać wyskakujące okienka.
- Dostosuj styl tak, aby znajdował się nad wszystkimi innymi elementami.
- Aby wyświetlić wyskakujące okienko, utwórz element i dodaj go do kontenera.
- Ukryj go, usuwając element popover z DOM.
Wymaga to od deweloperów większej zależności i większej liczby decyzji. Wymaga to też przeprowadzenia badań, aby znaleźć ofertę, która zapewnia wszystko, czego potrzebujesz. Interfejs API Popover jest przeznaczony do wielu scenariuszy, w tym do etykiet narzędzia. Celem jest uwzględnienie wszystkich typowych scenariuszy, aby deweloperzy nie musieli podejmować kolejnych decyzji i mogli skupić się na tworzeniu aplikacji.
Pierwsze okienko
To wszystko, czego potrzebujesz.
<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>
Co się tutaj dzieje?
- Nie musisz umieszczać elementu wyskakującego w kontenerze ani nigdzie indziej – jest on domyślnie ukryty.
- Aby wyświetlić ten element, nie musisz pisać kodu JavaScript. Zajmuje się tym atrybut
popovertoggletarget. - Gdy się pojawia, awansuje się na najwyższą warstwę. Oznacza to, że jest ona promowana w widocznym obszarze nad
document. Nie musisz zarządzać elementemz-indexani martwić się o to, gdzie w modelu DOM znajduje się Twoje menu wyskakujące. Może być głęboko zagnieżdżona w modelu DOM, z elementami nadrzędnymi przycinania. Za pomocą DevTools możesz też sprawdzić, które elementy znajdują się obecnie w górnej warstwie. Więcej informacji na temat górnej warstwy znajdziesz w tym artykule.
- Od razu masz do wyboru funkcję „Leke zamknięcie”. Oznacza to, że możesz zamknąć wyskakujące okienko, klikając poza nim, przechodząc do innego elementu za pomocą klawiatury lub naciskając klawisz Esc. Otwórz ją ponownie i wypróbuj.
Co jeszcze możesz zrobić za pomocą wyskakującego okienka? Przyjrzyjmy się temu przykładowi dalej. Rozważ to demo z kilkoma treściami na stronie.
Pływający przycisk polecenia ma stałe położenie i wysoką wartość z-index.
.fab {
position: fixed;
z-index: 99999;
}
Treść wyskakującego okienka jest zagnieżdżona w DOM, ale gdy otworzysz wyskakujące okienko, zostanie ono przeniesione nad elementem o stałym położeniu. Nie musisz ustawiać żadnych stylów.
Możesz też zauważyć, że wyskakujące okienko ma teraz pseudoelement ::backdrop. Wszystkie elementy, które znajdują się w górnej warstwie, otrzymują pseudoelement ::backdrop z możliwością określenia stylu. W tym przykładzie element ::backdrop ma stylizowane tło z ograniczonym kolorem alfa i filtrem tła, który rozmywa tło.
Stylowanie wyskakującego okienka
Skupmy się teraz na nadawaniu stylu wyskakującemu oknu. Domyślnie wyskakujące okienko ma stałą pozycję i pewne dopełnienie. Ma też display: none. Możesz zastąpić to, aby wyświetlić wyskakujące okienko. Nie sprawi to jednak, że zostanie ona przeniesiona na najwyższą warstwę.
[popover] { display: block; }
Niezależnie od tego, jak promujesz pop-up, po przeniesieniu go na najwyższą warstwę może być konieczne jego rozmieszczenie lub ustawienie. Nie możesz kierować reklam na najwyższą warstwę i robić takich rzeczy jak
:open {
display: grid;
place-items: center;
}
Domyślnie okienko wyskokowe jest wyświetlane na środku widoku w ramach margin: auto. Zdarzają się jednak sytuacje, w których chcesz jasno określić swoje stanowisko. Na przykład:
[popover] {
top: 50%;
left: 50%;
translate: -50%;
}
Jeśli chcesz rozmieścić zawartość w wyskakującym okienku za pomocą siatki CSS lub flexboxa, warto umieścić je w elementach. W przeciwnym razie musisz zadeklarować osobną regułę, która zmienia display, gdy wyskakujące okienko znajduje się w górnej warstwie. Jeśli ustawisz tę zasadę jako domyślną, domyślnie zastąpi ona display: none.
[popover]:open {
display: flex;
}
Jeśli wypróbowałeś/wypróbowałaś to demo, zauważysz, że wyskakujące okienko jest teraz wyświetlane i ukrywane. Możesz wyświetlać i ukrywać wyskakujące okienka za pomocą pseudoselektora :open. Pseudoselektor :open pasuje do wyskakujących okienek, które są widoczne (a więc znajdują się w górnej warstwie).
W tym przykładzie do przeprowadzenia przejścia użyto właściwości niestandardowej. Możesz też zastosować przejście do ::backdrop.
[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;
}
Naszą radą jest grupowanie przejść i animacji w ramach zapytania o media dotyczące ruchu. Pomaga to też w utrzymywaniu ustawionego czasu. Dzieje się tak, ponieważ nie można udostępniać wartości między parametrami popover i ::backdrop za pomocą właściwości niestandardowej.
@media(prefers-reduced-motion: no-preference) {
[popover] { transition: transform 0.2s; }
[popover]::backdrop { transition: opacity 0.2s; }
}
Do tej pory zdarzyło Ci się korzystać z elementu popovertoggletarget w celu wyświetlania wyskakujących okienek. Aby zamknąć okno, używamy opcji „Lekkie zamknięcie”. Możesz też używać atrybutów popovershowtarget i popoverhidetarget. Dodamy przycisk do wyskakującego okienka, który go ukrywa, i zmienimy przycisk przełączania na popovershowtarget.
<div id="code-popover" popover>
<button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>
Jak już wspomnieliśmy, interfejs API Popup obejmuje nie tylko nasze historyczne pojęcie wyskakujących okienek. Można ją tworzyć na potrzeby wszystkich typów scenariuszy, takich jak powiadomienia, menu, etykietki itp.
Niektóre z tych scenariuszy wymagają różnych wzorów interakcji. Interakcje takie jak najechanie kursorem. Przetestowaliśmy użycie atrybutu popoverhovertarget, ale nie jest on obecnie wdrażany.
<div popoverhovertarget="hover-popover">Hover for Code</div>
Zasada jest taka, że najedź kursorem na element, aby wyświetlić cel. To zachowanie można skonfigurować za pomocą właściwości CSS. Te właściwości CSS określają przedział czasu, w którym użytkownik może najeżdżać kursorem na element i z niego zwalniać, na który reaguje wyskakujące okienko. W eksperymencie z domyślnym działaniem wyświetlało się wyskakujące okienko po wyraźnym 0.5s :hover. Następnie musisz odrzucić to ostrzeżenie lub otworzyć kolejne wyskakujące okienko (więcej informacji na ten temat znajdziesz poniżej). Wynikało to z ustawienia czasu ukrywania wyskakującego okienka na Infinity.
Możesz jednak użyć JavaScriptu do zaimplementowania tej funkcji.
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);
});
});
Zaletą takiego elementu jest to, że pozwala ono zagwarantować, że działanie użytkownika było zamierzone (np. gdy użytkownik umieści wskaźnik myszy nad celem). Nie chcemy wyświetlać wyskakujących okienek, chyba że użytkownik tego chce.
Wypróbuj tę wersję demonstracyjną, w której możesz najeżdżać kursorem na cel, gdy okno jest ustawione na 0.5s.
Zanim omówimy typowe przypadki użycia i przykłady, przyjrzyjmy się kilku kwestiom.
Typy wyskakujących okienek
Omówiliśmy już zachowanie w przypadku interakcji bez JavaScriptu. A jak wygląda zachowanie wyskakujących okienek? Co zrobić, jeśli nie chcesz używać funkcji „Lekkie zamknięcie”? A może chcesz zastosować pojedynczy wzorzec do wyskakujących okienek?
Interfejs API Popover umożliwia określenie 3 typów pop-upów, które różnią się zachowaniem.
[popover=auto]/[popover]:
- Pomoc dotycząca wdrażania. Nie oznacza to tylko zagnieżdżania w DOM. Definicja okna wyskakującego z danymi przodków:
- powiązane przez pozycję DOM (podrzędny).
- powiązane atrybutami wywołania w elementach podrzędnych, takimi jak
popovertoggletarget,popovershowtargetitp. - związane z atrybutem
anchor(w trakcie opracowywania CSS Anchoring API).
- Jasne zamknięcie.
- Otwieranie innych wyskakujących okienek, które nie są pochodnymi wyskakujących okienek. Skorzystaj z poniższej prezentacji, która pokazuje, jak działa gniazdowanie za pomocą popoverów przodków. Zobacz, jak zmiana niektórych z
popoverhidetarget/popovershowtargetinstancji napopovertoggletargetmoże wpłynąć na zmiany. - Usunięcie jednego elementu powoduje usunięcie wszystkich, ale usunięcie elementu w grupie powoduje usunięcie tylko tych, które znajdują się nad nim.
[popover=manual]:
- nie zamyka innych wyskakujących okienek.
- Brak oświetlenia.
- Wymaga jawnego odrzucenia za pomocą elementu reguły lub kodu JavaScript.
JavaScript API
Jeśli chcesz mieć większą kontrolę nad wyskakującymi okienkami, możesz użyć JavaScript. Masz do dyspozycji metodę showPopover i hidePopover. Do odebrania są też zdarzenia popovershow i popoverhide:
Wyświetlanie wyskakującego okienka
js
popoverElement.showPopover()
Ukrywanie wyskakującego okienka:
popoverElement.hidePopover()
Nasłuchuj wyskakującego okienka:
popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)
Poczekaj, aż pojawi się wyskakujące okienko, i anuluj jego wyświetlanie:
popoverElement.addEventListener('popovershow',event => {
event.preventDefault();
console.warn(‘We blocked a popover from being shown’);
})
Sprawdź, czy okienko zostało ukryte:
popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)
Nie można anulować ukrycia wyskakującego okienka:
popoverElement.addEventListener('popoverhide',event => {
event.preventDefault();
console.warn("You aren't allowed to cancel the hiding of a popover");
})
Sprawdź, czy wyskakujące okienko znajduje się w górnej warstwie:
popoverElement.matches(':open')
Daje to dodatkowe możliwości w niektórych rzadszych sytuacjach. Możesz na przykład wyświetlić wyskakujące okienko po okresie bezczynności.
W tej wersji demonstracyjnej znajdują się okienka z klikniętymi okienkami, więc do odtwarzania dźwięku będzie potrzebny JavaScript. Po kliknięciu ukrywamy wyskakujące okienko, odtwarzamy dźwięk, a potem znów je wyświetlamy.
Ułatwienia dostępu
W przypadku interfejsu Popover API na pierwszym miejscu stawiamy ułatwienia dostępu. Mapowania ułatwień dostępu w razie potrzeby powiązają wyskakujące okienko z odpowiednim elementem wywoławczym. Oznacza to, że nie musisz deklarować atrybutów aria-*, takich jak aria-haspopup, przy założeniu, że używasz jednego z atrybutów aktywujących, takich jak popovertoggletarget.
Aby zarządzać punktem skupienia, możesz użyć atrybutu autofocus, aby przenieść go do elementu w wyskakującym okienku. Ta funkcja jest taka sama jak w przypadku dialogu, ale różnica pojawia się przy ponownym skupieniu, czyli pomniejszeniu obrazu. W większości przypadków zamknięcie wyskakującego okienka powoduje powrót do poprzednio wybranego elementu. Jednak w przypadku lekkiego zamknięcia fokus przenosi się na kliknięty element, jeśli można go zaznaczyć. Przeczytaj sekcję dotyczącą zarządzania ostrością w artykule.
Aby zobaczyć, jak to działa, musisz otworzyć „wersję na pełny ekran” tego demonstracyjnego dokumentu.
W tym pokazie element, na którym jest skupiona uwaga, ma zielone obramowanie. Spróbuj poruszać się po interfejsie za pomocą klawiatury. Zwróć uwagę, gdzie zaznaczenie powraca, gdy wyskakujące okienko zostanie zamknięte. Możesz też zauważyć, że po kliknięciu karty wyskakujące okienko się zamknie. To jest celowe. Chociaż okna modalne mają funkcję zarządzania fokusem, nie blokują go. Nawigacja za pomocą klawiatury rozpoznaje sygnał zamknięcia, gdy fokus przestanie być ustawiony na wyskakujące okienko.
Utwierdzenie pozycji (w fazie rozwoju)
W przypadku wyskakujących okienek trudnym do uwzględnienia wzorcem jest zakotwiczenie elementu do jego elementu wywołującego. Jeśli na przykład podręczny opis jest ustawiony tak, aby wyświetlać się nad elementem wywołującym, ale dokument jest przewijany. Ta etykietka może zostać obcięta przez widoczny obszar. Obecnie istnieją rozwiązania JavaScript, które umożliwiają rozwiązanie tego problemu, np. przesuwający się interfejs użytkownika. Przesuną oni kursor, aby zatrzymać to zjawisko i uwzględnić żądaną kolejność pozycji.
Chcemy jednak, aby można było to określić za pomocą stylów. W tym celu tworzymy dodatkowy interfejs API, który będzie działać razem z interfejsem Popover API. Interfejs API „CSS Anchor Positioning” umożliwia łączenie elementów z innymi elementami. Dzięki temu elementy będą odpowiednio przemieszczane, aby nie były przycinane przez obszar widoku.
Ten pokaz korzysta z interfejsu Anchoring API w jego obecnej wersji. Pozycja łodzi odpowiada pozycji kotwicy w widocznym obszarze.
Oto fragment kodu CSS, który umożliwia działanie tego demonstracyjnego szablonu. Nie wymaga JavaScriptu.
.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);
}
}
Specyfikację znajdziesz tutaj. W przypadku tego interfejsu API będzie też dostępna polyfill.
Przykłady
Teraz, gdy już wiesz, co oferuje wyskakujące okienko i jak z niego korzystać, przyjrzyjmy się kilku przykładom.
Powiadomienia
Ten pokaz demonstruje powiadomienie „Kopiuj do schowka”.
- Używana strefa czasowa:
[popover=manual]. - Po wykonaniu działania wyświetl wyskakujące okienko z
showPopover. - Po upływie czasu oczekiwania
2000msukryj je za pomocą funkcjihidePopover.
Toasty
Ta wersja demonstracyjna używa górnej warstwy do wyświetlania powiadomień w stylu powiadomień.
- Jedno wyskakujące okienko o typie
manualdziała jako kontener. - Nowe powiadomienia zostaną dodane do wyskakującego okienka i pojawi się ono.
- Są one usuwane za pomocą interfejsu API animacji internetowych po kliknięciu i usuwane z DOM.
- Jeśli nie ma żadnych komunikatów, wyskakujące okienko jest ukryte.
Menu zagnieżdżone
Ten pokaz demonstruje działanie zagnieżdżonego menu nawigacyjnego.
- Użyj
[popover=auto], ponieważ pozwala na zagnieżdżone wyskakujące okienka. - Aby nawigować za pomocą klawiatury, kliknij
autofocusprzy pierwszym linku w każdym menu. - To idealny kandydat do interfejsu CSS Anchoring API. W tym przypadku możesz użyć niewielkiej ilości kodu JavaScript, aby aktualizować pozycje za pomocą właściwości niestandardowych.
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));
Pamiętaj, że ta wersja demonstracyjna używa języka autofocus, więc trzeba ją otworzyć w „widoku pełnoekranowym” do nawigacji za pomocą klawiatury.
Wyskakujące okienko multimediów
Ten pokaz pokazuje, jak można wyświetlić multimedia.
- Używa
[popover=auto]do wyłączenia światła. - JavaScript nasłuchuje zdarzenia
playzwiązanego z filmem i wyświetla go. - Zdarzenie
popoverhidewstrzymuje film.
Pop-upy w stylu wiki
Ten przykład pokazuje, jak utworzyć wbudowane etykietki treści z multimediami.
- Używana strefa czasowa:
[popover=auto]. Wyświetlanie jednego z nich powoduje ukrycie pozostałych, ponieważ nie są one wspólne. - Wyświetlany w witrynie
pointerenterz użyciem kodu JavaScript. - Kolejny idealny kandydat do użycia interfejsu CSS Anchoring API.
Panel nawigacji
W tym pokazie tworzymy szufladę nawigacyjną za pomocą wyskakującego okienka.
- Używa
[popover=auto]do wyłączenia światła. - Używa
autofocus, aby ustawić fokus na pierwszym elemencie nawigacji.
Zarządzanie tłem
Ten pokaz wprowadzający pokazuje, jak zarządzać tłem w przypadku wielu wyskakujących okienek, w których chcesz, aby widoczne było tylko jedno ::backdrop.
- Użyj JavaScriptu, aby utrzymać listę widocznych wyskakujących okienek.
- Zastosuj nazwę klasy do najniższego okienka w górnej warstwie.
Niestandardowe wyskakujące okienko kursora
Ten pokaz demonstruje, jak za pomocą popover przenieść canvas na najwyższą warstwę i wykorzystać go do wyświetlania niestandardowego kursora.
- Przenieś
canvasna najwyższą warstwę za pomocą:showPopoveri[popover=manual]. - Gdy inne wyskakujące okienka są otwarte, ukryj i pokaż wyskakujące okienko
canvas, aby upewnić się, że jest ono na górze.
Wyskakujące okienko arkusza działań
W tym pokazie widać, jak można użyć wyskakującego okienka jako panelu czynności.
- Domyślnie wyświetlaj wyskakujące okienko, zastępując
display. - Arkusz działań jest otwierany za pomocą aktywatora wyskakującego.
- Gdy wyskakujące okienko jest wyświetlane, jest przenoszone na najwyższą warstwę i przekształcane w widok.
- Można go przywrócić za pomocą lekkiego odrzucenia.
Pop-up po aktywowaniu klawiatury
Ten przykład pokazuje, jak można użyć wyskakującego okienka w interfejsie stylu palety poleceń.
- Aby wyświetlić menu wyskakujące, naciśnij cmd + j.
inputdotyczy polaautofocus.- Pole kombi to drugie
popoverznajdujące się pod głównym polem wejściowym. - Lekkie zamknięcie zamyka paletę, jeśli menu nie jest widoczne.
- Inny kandydat do interfejsu Anchoring API
Wyskakujące okienko z opóźnieniem
To demo pokazuje wyskakujące okienko po 4 sekundach bezczynności. Wzór interfejsu często używany w aplikacjach, które przechowują bezpieczne informacje o użytkowniku, aby wyświetlić okno logowania.
- Użyj JavaScriptu, aby wyświetlić wyskakujące okienko po okresie bezczynności.
- W wyskakującym okienku zresetuj minutnik.
Wygaszacz ekranu
Podobnie jak w poprzednim pokazie, możesz dodać do swojej witryny odrobinę fantazji i ekran blokady.
- Aby wyświetlić wyskakujące okienko po okresie braku aktywności, użyj JavaScriptu.
- Zatrzymanie lampki w celu ukrycia i zresetowania minutnika.
Caret follow
Ten pokaz demonstruje, jak można ustawić wyskakujące okienko, które podąża za kursorem.
- Wyświetlanie wyskakującego okienka na podstawie wybranego elementu, kluczowego zdarzenia lub wpisanego znaku specjalnego.
- Użyj kodu JavaScript, aby zaktualizować pozycję wyskakującego okienka za pomocą właściwości niestandardowych ograniczonych do zakresu.
- Ten wzór wymaga przemyślenia treści, które mają być wyświetlane, oraz dostępności.
- Często występuje w interfejsie edycji tekstu i w aplikacjach, w których można dodawać tagi.
Menu pływającego przycisku polecenia
Ten pokaz demonstruje, jak za pomocą wyskakującego okienka można zaimplementować menu przycisku działania bez JavaScriptu.
- Promuj wyskakujące okienko typu
manualza pomocą metodyshowPopover. To jest przycisk główny. - Menu to kolejne okienko, które jest celem przycisku głównego.
- Menu otwiera się za pomocą
popovertoggletarget. - Naciśnij
autofocus, aby ustawić widok na pierwszym elemencie menu. - Lekkie zamknięcie zamyka menu.
- Skręt ikony wykorzystuje wartość
:has(). Więcej informacji o:has()znajdziesz w tym artykule.
Znakomicie.
To wprowadzenie do tematu popovera – w ramach inicjatywy Open UI. Jeśli będziesz go używać w rozsądny sposób, stanie się on fantastycznym dodatkiem do platformy internetowej.
Zapoznaj się z artykułem Otwarte interfejsy użytkownika. Pop-up z informacjami jest aktualizowany wraz z rozwojem interfejsu API. A tutaj kolekcja ze wszystkimi prezentacjami.
Dziękuję za „zatrzymanie się”!
Zdjęcie: Madison Oren, Unsplash