HTML Popover API: plac zabaw na żywo i dokumentacja
Plac zabaw HTML Popover API
HTML Popover API: popovertarget, showPopover, zdarzenia | We.Inc
Wypróbuj Popover API na żywo: popovery auto, manual i hint, przyciski popovertarget, showPopover, hidePopover i togglePopover oraz log zdarzeń beforetoggle i toggle.
Dodaj atrybut popover do dowolnego elementu i wskaż go przyciskiem przez popovertarget="id", a przeglądarka sama obsłuży otwieranie, zamykanie, top layer i klawisz Escape, bez JavaScriptu. W skryptach wywołuj showPopover(), hidePopover() lub togglePopover() i nasłuchuj zdarzeń beforetoggle i toggle. popover="auto" zamyka się po kliknięciu poza nim; manual nie.
Typy popoverów
Wartość
Zamyka go kliknięcie poza nim lub Escape
Inne popovery
popover or popover="auto"
Tak
Otwarcie jednego zamyka inne popovery auto, z wyjątkiem jego przodków
popover="manual"
Nie, zamykasz go sam
Dowolna liczba może być otwarta jednocześnie
popover="hint"
Tak
Zamyka inne popovery hint, które nie są jego przodkami; przeznaczony na tooltipy
Popovery oznaczały kiedyś bibliotekę do pozycjonowania, obsługę kliknięcia poza elementem i walkę z z-index. Popover API przenosi to wszystko do HTML. Poniższy plac zabaw tworzy w Twojej przeglądarce prawdziwy popover, abyś mógł zmieniać jego typ, sterować nim z kodu i obserwować kolejność zdarzeń.
Wybierz dla popovera na placu zabaw typ auto, manual lub hint.
Otwórz go przyciskiem deklaratywnym albo wywołaj trzy metody przyciskami skryptowymi.
Kliknij poza nim lub naciśnij Escape, aby zobaczyć, które typy zamykają się same.
Czytaj log zdarzeń: najpierw uruchamia się beforetoggle, potem toggle, każde z oldState i newState.
Tylko elementy button i input mogą mieć popovertarget. Użyj prawdziwego przycisku, aby użytkownicy klawiatury mogli do niego dotrzeć.
popovertargetaction przyjmuje toggle (domyślnie), show lub hide, więc osobne przyciski otwierania i zamykania nie wymagają skryptu.
Stylizuj stan otwarty przez :popover-open i przyciemniaj stronę pod spodem przez ::backdrop.
Popover nie jest modalny. Dla formularza, który trzeba wypełnić przed powrotem do strony, użyj dialog otwieranego przez showModal().
Widoczne popovery są w top layer, więc nie potrzebujesz już wysokiego z-index, aby trzymać je nad wszystkim innym.
Najczęściej zadawane pytania
Które przeglądarki obsługują Popover API?
MDN oznacza Popover API jako Baseline newly available od stycznia 2025, co znaczy, że działa w najnowszych wersjach głównych przeglądarek. Niektóre nowsze części, na przykład wartość hint, mogą mieć węższe wsparcie, więc sprawdź tabelę kompatybilności, zanim zaczniesz na nich polegać.
Czym różnią się popovery auto i manual?
Popover auto obsługuje light dismiss: kliknięcie poza nim lub naciśnięcie Escape go zamyka, a jego otwarcie zamyka inne popovery auto. Popover manual pozostaje otwarty, dopóki nie zamknie go przycisk lub skrypt, i kilka może być otwartych razem, co pasuje do powiadomień typu toast.
Czy Escape zamyka każdy popover?
Escape zamyka popovery auto i hint, te same, które zamykają się po kliknięciu poza nimi. Popover manual ignoruje oba, więc potrzebuje własnego przycisku zamykania lub wywołania hidePopover().
Skąd mam wiedzieć, kiedy popover się otwiera lub zamyka?
Nasłuchuj zdarzenia toggle na elemencie popovera. Jego newState to "open" lub "closed". Zdarzenie beforetoggle uruchamia się tuż przed zmianą i to dobre miejsce na przygotowanie treści.
Gdzie domyślnie pojawia się popover?
Na środku viewportu, z pozycjonowaniem fixed, w top layer. Przesuń go własnym CSS albo przez anchor positioning tam, gdzie przeglądarka to obsługuje.
Najpierw deklaratywnie
Większość popoverów nie potrzebuje żadnego skryptu. Przycisk i popover są połączone przez id, a przeglądarka sama podłącza przełączanie, light dismiss i klawisz Escape.
Sięgaj po showPopover() i pokrewne metody, gdy wyzwalaczem nie jest przycisk, na przykład przy otwieraniu podpowiedzi po nieudanej walidacji formularza lub zamykaniu powiadomienia po czasie.
Menu, powiadomienia i podpowiedzi
Auto pasuje do menu i selektorów, które powinny znikać, gdy uwaga przenosi się gdzie indziej. Manual pasuje do powiadomień, które się układają w stos i zostają do zamknięcia. Hint jest przeznaczony na tooltipy przy najechaniu i fokusie.
Niezależnie od typu, trzymaj treść krótką i upewnij się, że każda akcja w środku jest dostępna także z klawiatury.
Dokumentacja Popover API
Atrybuty, metody, zdarzenia i selektory
Nazwa
Rodzaj
Co robi
Atrybut globalny
Zmienia element w popover: auto, manual lub hint
Atrybut na button lub input
Id popovera, który kontrolka otwiera i zamyka
Atrybut na button lub input
toggle (domyślnie), show lub hide
showPopover()
Metoda
Dodaje popover do top layer
hidePopover()
Metoda
Usuwa go z top layer i ukrywa
togglePopover()
Metoda
Pokazuje go, gdy jest ukryty, ukrywa, gdy jest widoczny
Zdarzenie
Uruchamia się przed zmianą stanu; ma oldState i newState
Zdarzenie
Uruchamia się po zmianie stanu; ma oldState i newState
:popover-open
Pseudoklasa CSS
Pasuje do popovera, gdy jest widoczny
::backdrop
Pseudoelement CSS
Warstwa pod widocznym popoverem
Przykłady popoverów bez JavaScriptu
Te ramki działają z wyłączonymi skryptami, a popovery i tak działają, bo ich zachowanie pochodzi z HTML.
Menu jako popover auto
Kliknij przycisk, a potem kliknij gdzie indziej lub naciśnij Escape. Menu zamknie się samo.
Powiadomienie manual z osobnymi przyciskami pokazania i ukrycia
Kliknięcie poza nim nic tu nie robi. Zamyka je tylko przycisk ukrycia.
Przyciemnij stronę pod popoverem
::backdrop stylizuje warstwę pod popoverem. Nadal nie jest modalny; kliknięcie strony pod spodem go zamyka.
Sterowanie popoverem z JavaScriptu
Metody, zdarzenia i wykrywanie wsparcia
Sprawdź wsparcie przed wywołaniem metod, a potem odczytaj newState w zdarzeniu toggle.
Plac zabaw popovera
Twoja przeglądarka uruchamia tu prawdziwy popover: zmieniaj jego typ, wywołuj jego metody i czytaj log zdarzeń.
Przycisk deklaratywny (popovertarget)
Metody skryptowe
Jestem popoverem typu {v}. Kliknij poza mną lub naciśnij Escape, aby sprawdzić light dismiss.
Zamknij
Stan: {v}
Log zdarzeń
Wyczyść log
Brak zdarzeń.
Ta przeglądarka nie obsługuje Popover API, więc plac zabaw jest wyłączony.