Powiadomienia wyskakujące to tymczasowe komunikaty o stanie. W przeciwieństwie do menu nie powinny się zamykać, gdy użytkownik wchodzi w interakcję z innymi częściami strony. Stan popover="manual" jest idealny, ponieważ nie ma zachowania „light-dismiss” i umożliwia współistnienie wielu powiadomień.
Wskazówki dotyczące implementowania
- OBOWIĄZKOWO: użyj popover="manual", aby powiadomienie było widoczne, dopóki nie zostanie wyraźnie zamknięte lub nie upłynie czas określony przez skrypt.
- UŻYWAJ kontenera do zarządzania układem wielu komunikatów toast. Ponieważ wyskakujące okienka w warstwie górnej ignorują indeks Z elementu nadrzędnego, musisz je umieścić pojedynczo lub w ramach wspólnej grupy układu.
- UŻYWAJ funkcji sibling-index(), aby dodawać marginesy między powiadomieniami, dzięki czemu elementy znajdujące się niżej na stosie będą widoczne.
- DO provide an explicit "Close" button within the toast using popovertargetaction="hide".
- UŻYWAJ JavaScriptu do liczników czasu automatycznego zamykania (np. wywołując funkcję hidePopover() po 3000 ms).
- UŻYWAJ właściwości transition-behavior: allow-discrete, aby animować wejście i wyjście z warstwy najwyższej.
Strategie zastępcze
Kreacje zastępcze i obsługa wyskakujących okienek w przeglądarkach
Interfejs Popover API to głównie progresywne ulepszanie, ale jego definiujące zachowania – promowanie warstwy górnej, lekkie odrzucanie i wywoływanie popovertarget – nie mają odpowiednika tylko w CSS. Starsze przeglądarki wymagają polyfilla lub ręcznego rozwiązania zastępczego, jeśli nie chcesz go dostarczać.
Polyfill: aby obsługiwać atrybut popover w starszych przeglądarkach, warunkowo wczytuj @oddbird/popover-polyfill. OBOWIĄZKOWO: wykryj funkcję, sprawdzając właściwość popover w HTMLElement.prototype, i wczytaj polyfill tylko wtedy, gdy brakuje obsługi natywnej – NIE wczytuj go bezwarunkowo.
Za pomocą bundlera lub mapy importu:
// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
import("@oddbird/popover-polyfill");
}
Bez bundlera, importuj z sieci CDN w tagu <script type="module">:
<script type="module">
if (!("popover" in HTMLElement.prototype)) {
import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
}
</script>
Uwaga dotycząca stylów: polyfill nie może zdefiniować prawdziwej pseudoklasy :popover-open, więc zamiast tego stosuje klasę .\:popover-open. OBOWIĄZKOWO: połącz te 2 właściwości za pomocą :is() lub :where(), w przeciwnym razie przeglądarki, które nie obsługują :popover-open, odrzucą całą regułę:
[popover]:is(:popover-open, .\:popover-open) {
display: block;
}
Możesz też użyć position: fixed i ręcznie obliczyć współrzędne za pomocą getBoundingClientRect() lub polegać na domyślnym pozycjonowaniu za pomocą inset: auto, jeśli jest to akceptowalne w danym przypadku użycia.
sibling-index()
- Wskazówka: jeśli funkcja sibling-index() nie jest obsługiwana, użyj operatora
+, aby dodać margines ręcznie. np.popover + popover { margin-top: 1rem }
anchor-positioning
- Wskazówki: użyj kodu polyfill do pozycjonowania kotwicy CSS. W przypadku kreacji zastępczej bez kodu polyfill ustaw domyślnie stałą pozycję etykietki u dołu widocznego obszaru za pomocą
@supports not (anchor-name: --foo).
transition-behavior
- Wskazówka: jeśli właściwość transition-behavior nie jest obsługiwana, użyj JavaScriptu, aby dodać animację za pomocą klas, gdy element wyskakującego powiadomienia pojawia się i znika.