popover
Zamienia element w wyskakujące okienko otwierane przyciskiem, bez JavaScriptu.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#<button popovertarget="menu" type="button">Otwórz menu</button>
<div id="menu" popover style="padding: 16px; border-radius: 12px; border: 1px solid #444;">
<p style="margin: 0 0 8px">Ustawienia konta</p>
<button popovertarget="menu" popovertargetaction="hide" type="button">Zamknij</button>
</div>Definicja i zastosowanie
#Atrybut popover sprawia, że element jest domyślnie ukryty i może pojawić się nad resztą strony. Otwiera go przycisk z atrybutem popovertarget, wskazującym id okienka. Nie potrzebujesz do tego ani linijki JavaScriptu.
Okienko z wartością auto zamyka się po kliknięciu poza nim i po naciśnięciu Escape, a otwarcie kolejnego okienka auto zamyka poprzednie. Wartość manual wymaga zamknięcia przyciskiem lub skryptem.
Element z popover trafia do tak zwanej warstwy górnej, więc nie musisz walczyć z z-index. To dobre rozwiązanie na menu, podpowiedzi i małe panele z opcjami.
Składnia
#<button popovertarget="id-okienka">…</button>
<div id="id-okienka" popover>…</div>Wartości
#auto
lub pusty
Zamyka się po kliknięciu obok i klawiszem Escape. Otwarcie innego okienka auto zamyka to.manual
Zamyka się tylko przyciskiem lub skryptem. Kilka okienek manual może być otwartych naraz.
Obsługa przeglądarek
#Nowość w przeglądarkach · od 2024 roku
Działa w aktualnych wersjach wszystkich głównych przeglądarek. Starsze wersje mogą tego nie obsługiwać.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przycisk otwierający okienko sam ustawia właściwości dostępności, na przykład
aria-expanded. - Do okien blokujących resztę strony, na przykład potwierdzeń, lepszy jest
<dialog>otwierany metodąshowModal().
Powiązane hasła
#- <dialog>Okno dialogowe albo modal: potwierdzenie, formularz lub komunikat nad resztą strony.
- hiddenUkrywa element: przeglądarka go nie wyświetla i nie odczytuje.
- <button>Klikalny przycisk: wysyła formularz, czyści go albo uruchamia akcję na stronie.
- inertWyłącza interakcję z elementem i jego potomkami: klikanie, fokus i czytniki ekranu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.