Wyskakujące okienka: powraca do popularności!

Inicjatywa Open UI ma na celu ułatwienie deweloperom tworzenia przydatnych treści. Aby to osiągnąć, staramy się rozwiązać bardziej problematyczne wzorce, z którymi mają do czynienia deweloperzy. Aby to zrobić, zapewnimy lepsze interfejsy API i komponenty wbudowane w platformę.

Przykładem mogą być wyskakujące okienka. W Open UI są one opisane jako „Popovers”.

Popover od dawna ma dość spolaryzowaną reputację. Wynika to częściowo ze sposobu ich stworzenia i wdrożenia. Nie jest to łatwy wzorzec do prawidłowego utworzenia, ale może okazać się bardzo wartościowy, kierując użytkowników do określonych rzeczy lub informując ich o treściach w witrynie – zwłaszcza jeśli używa się ich w odpowiedni sposób.

Podczas budowania wyskakujących okienek często towarzyszy im 2 główne kwestie:

• Co zrobić, aby został umieszczony nad pozostałymi treściami w odpowiednim miejscu?
• Jak sprawić, żeby była bardziej przystępna (np. z możliwością korzystania z klawiatury, z możliwością skupienia itp.).

Wbudowany interfejs Popover API ma różne cele, a ich główny cel: ułatwianie deweloperom tworzenia takich wzorców. Najważniejsze z nich to:

• Ułatw wyświetlanie elementu i jego elementów podrzędnych nad pozostałą częścią dokumentu.
• Zadbaj o dostępność.
• Nie wymagają obsługi JavaScriptu w przypadku najczęstszych zachowań (przymrużenie oświetlenia, singleton, nakładanie itd.).

Pełną specyfikację wyskakujących okienek znajdziesz na stronie OpenUI.

Zgodność z przeglądarką

Gdzie można teraz korzystać z wbudowanego interfejsu Popover API? Jest on obsługiwany w Chrome Canary za pomocą flagi „Eksperymentalne funkcje platformy internetowej” w momencie tworzenia raportu.

Aby włączyć tę flagę, otwórz Chrome Canary i stronę chrome://flags. Następnie włącz flagę „Eksperymentalne funkcje platformy internetowej”.

Dostępna jest też wersja próbna origin dla deweloperów, którzy chcą przetestować tę funkcję w środowisku produkcyjnym.

Pracujemy także nad polyfill dla interfejsu API. Koniecznie sprawdź repozytorium na stronie github.com/oddbird/popup-polyfill.

Dostęp do wyskakującej pomocy możesz uzyskać za pomocą:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

Obecne rozwiązania

Co możesz obecnie zrobić, aby promować swoje treści ponad wszystko? Jeśli Twoja przeglądarka go obsługuje, możesz użyć elementu okna HTML. Aby to zrobić, użyj formatu „Modal”. Do tego potrzebny jest JavaScript.

Dialog.showModal();

Warto zwrócić uwagę na pewne ułatwienia dostępu. Na przykład zalecane jest użycie polecenia a11y-dialog, jeśli obsługujesz użytkowników Safari w wersji starszej niż 15.4.

Możesz też użyć jednej z wielu dostępnych bibliotek opartych na wyskakujących okienkach, alertach i etykietkach. Wiele z nich działa w podobny sposób.

• Dołącz do treści kontener na potrzeby wyświetlania wyskakujących okienek.
• Dostosuj go tak, aby znajdował się ponad innymi elementami.
• Utwórz element i dołącz go do kontenera, aby wyświetlić wyskakujące okienko.
• Aby ją ukryć, usuń element wyskakującego okienka z DOM.

Wymaga to dodatkowej zależności i większej liczby decyzji deweloperów. Wymaga też wszelkich poszukiwań w celu znalezienia oferty, która oferuje wszystko, czego potrzebujesz. Popover API ma na celu obsługę wielu scenariuszy, w tym etykietek. Chodzi o uwzględnienie tych wszystkich typowych scenariuszy, dzięki czemu deweloperzy nie muszą już podejmować kolejnych decyzji i mogą się skupić na tworzeniu rozwiązań.

Twoje pierwsze wyskakujące okienko

To wszystko, czego potrzebujesz.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

Ale co się tu dzieje?

• Nie musisz umieszczać elementu wyskakującego okienka w kontenerze ani czegokolwiek – jest on domyślnie ukryty.
• Nie musisz pisać w języku JavaScript, aby się wyświetlić. Jest on obsługiwany przez atrybut popovertoggletarget.
• Po wyświetleniu zostaje awansowana do górnej warstwy. Oznacza to, że pojawia się ona w widocznym obszarze powyżej elementu document. Nie musisz zarządzać funkcją z-index ani martwić się o umiejscowienie wyskakującego okienka w DOM. Może on być umieszczony głęboko w elemencie DOM z elementami nadrzędnymi przycięcia. W Narzędziach deweloperskich możesz też sprawdzić, które elementy znajdują się obecnie w górnej warstwie. Więcej informacji o górnej warstwie znajdziesz w tym artykule.

• Po wyjęciu z pudełka zobaczysz opcję „Lekkie zamknięcie”. Oznacza to, że możesz je zamknąć za pomocą sygnału zamykania, na przykład kliknięcia poza oknem, przejścia z klawiatury do innego elementu czy klawisza Esc. Otwórz ją ponownie i spróbuj.

Co jeszcze daje wyskakujące okienko? Przeanalizujmy ten przykład bardziej szczegółowo. Przyjrzyj się tej prezentacji, na której znajdziesz trochę treści na stronie.

Pływający przycisk polecenia ma stałe położenie i wysoką wartość z-index.

.fab {
  position: fixed;
  z-index: 99999;
}

Zawartość wyskakującego okienka jest zagnieżdżona w DOM, ale po otwarciu wyskakującego okienka pojawia się nad tym elementem o stałej pozycji. Nie musisz ustawiać żadnych stylów.

Zwróć uwagę, że wyskakujące okienko ma teraz pseudoelement ::backdrop. Wszystkie elementy w warstwie górnej otrzymują pseudoelement ::backdrop z możliwością stylizacji. W tym przykładzie styl ::backdrop ma zmniejszony kolor tła w wersji alfa i filtr tła, który zamazuje treść.

Styl wyskakującego okienka

Zwróćmy uwagę na styl wyskakującego okienka. Domyślnie wyskakujące okienko ma stałe położenie i zastosowano do niego dopełnienie. Ma też display: none. Możesz zastąpić to ustawienie, aby wyświetlać wyskakujące okienko. Nie sprawi to jednak, że trafią one do górnej warstwy.

[popover] { display: block; }

Niezależnie od tego, jak promujesz wyskakujące okienko, po umieszczeniu wyskakującego okienka w górnej warstwie może być konieczne jego rozłożenie lub umiejscowienie. Nie można kierować reklam na górną warstwę i wykonać w następujący sposób

:open {
  display: grid;
  place-items: center;
}

Domyślnie wyskakujące okienko będzie wyświetlane na środku widocznego obszaru przy użyciu elementu margin: auto. Czasami jednak warto wyraźnie informować o pozycjonowaniu. Na przykład:

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

Jeśli chcesz ułożyć zawartość wyskakującego okienka za pomocą siatki CSS lub Flexbox, najrozsądniej będzie umieścić ją w elemencie. W przeciwnym razie musisz zadeklarować oddzielną regułę, która zmieni display po umieszczeniu wyskakującego okienka w górnej warstwie. Ustawienie domyślne spowoduje, że będzie on domyślnie wyświetlany, zastępując dyrektywę display: none.

[popover]:open {
 display: flex;
}

Po wypróbowaniu wersji demonstracyjnej zauważysz, że wyskakujące okienko przemieszcza się i znika. Możesz przechodzić między wyskakującymi okienkami za pomocą pseudoselektora :open. Pseudoselektor :open dopasowuje wyskakujące okienka, które są wyświetlane (i tym samym w górnej warstwie).

W tym przykładzie do sterowania przeniesieniem użyto właściwości niestandardowej. Możesz też zastosować przejście do elementu ::backdrop wyskakującego okienka.

[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;
}

Wskazówka dotyczy grupowania przejść i animacji w zapytaniu o multimedia na potrzeby ruchu. Pomoże Ci to też zachować harmonogram. Wynika to z tego, że nie można udostępniać wartości między elementami 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 było używane popovertoggletarget do wyświetlania wyskakującego okienka. Aby go zamknąć, użyj opcji „Lekkie zamknięcie”. Możesz jednak korzystać z atrybutów popovershowtarget i popoverhidetarget. Dodajmy do wyskakującego okienka przycisk, który go ukrywa, i zmieńmy 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 Popover API obejmuje nie tylko naszą historyczną koncepcję wyskakujących okienek. Możesz zastosować ją do wszystkich typów scenariuszy, takich jak powiadomienia, menu, etykietki itp.

Niektóre z tych scenariuszy wymagają różnych wzorców interakcji. na przykład najechanie kursorem. Przetestowaliśmy stosowanie atrybutu popoverhovertarget, ale obecnie jeszcze nie zaimplementowano.

<div popoverhovertarget="hover-popover">Hover for Code</div>

Polega to na tym, że najechanie kursorem na element wyświetla element docelowy. To zachowanie można skonfigurować za pomocą właściwości CSS. Te właściwości CSS definiują okno czasu przy najeżdżaniu na element i z niego, na który reaguje wyskakujące okienko. Domyślne zachowanie, z którym eksperymentowano, poskutkowało wyświetleniem wyskakującego okienka po jawnym 0.5s o wartości :hover. Następnie trzeba było zamknąć je delikatnie lub otworzyć kolejne wyskakujące okienko (więcej informacji na ten temat). Wynika to z ustawienia czasu trwania ukrywania w wyskakującym okienku na Infinity.

Do tego czasu możesz użyć JavaScriptu polyfill.

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ą ustawienia takiego okna jest zapewnienie, że użytkownik podejmuje zamierzone działanie (np. jeśli użytkownik najedzie kursorem na cel). Nie chcemy wyświetlać wyskakującego okienka, chyba że jest to ich intencją.

Wypróbuj tę demonstrację, w której możesz najeżdżać kursorem na cel w oknie ustawionym na 0.5s.

---

Zanim omówimy kilka typowych przypadków użycia i przykładów, przyjrzyjmy się kilku działaniom.

---

Rodzaje wyskakujących okienek

Omówiliśmy interakcje niezwiązane z JavaScriptem. A co z zachowaniem pop-upów jako całości. Co zrobić, jeśli nie chcesz wyłączyć funkcji „Lekkie zamknięcie”? A może chcesz użyć jednolitego wzoru do popoverów?

Popover API pozwala określić 3 typy wyskakujących okienek, które różnią się w zależności od działania.

[popover=auto]/[popover]:

• Pomoc dotycząca etapu testowego. Nie oznacza to tylko umieszczenia w elemencie DOM. Definicja nadrzędnego popovera oznacza, że:
  • powiązane według pozycji DOM (element podrzędny).
  • powiązane przez wyzwalanie atrybutów w elementach podrzędnych, takich jak popovertoggletarget, popovershowtarget itd.
  • powiązane z atrybutem anchor (w trakcie opracowywania interfejsu CSS Anchoring API).
• Wyłączenie lampki.
• Otwarcie zamyka wyskakujące okienka, które nie są elementami nadrzędnymi. Zagraj w poniższą prezentację, która przedstawia, jak działa zagnieżdżenie w przypadku rodowych popoverów. Zobacz, jak zmiana niektórych wystąpień popoverhidetarget/popovershowtarget na popovertoggletarget może coś zmienić.
• Zamknięcie jednego z nich powoduje odrzucenie wszystkich, a odrzucenie w stosie powoduje odrzucenie tylko tych znajdujących się nad nim w stosie.

[popover=manual]:

• Nie zamyka innych okien.
• Nie zamyka się dioda.
• Wymaga bezpośredniego odrzucenia za pomocą elementu aktywującego lub JavaScriptu.

JavaScript API

Jeśli potrzebujesz większej kontroli nad wyskakującymi okienkami, możesz skorzystać z języka JavaScript. Korzystasz zarówno z metody showPopover, jak i hidePopover. Masz też zdarzenia popovershow i popoverhide, na które możesz nasłuchiwać:

Pokaż wyskakujące okienko js popoverElement.showPopover() Ukryj wyskakujące okienko:

popoverElement.hidePopover()

Wysłuchaj wyskakującego okienka:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Wysłuchaj wyskakującego okienka i anuluj jego wyświetlenie:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

Sprawdź, czy wyskakujące okienko jest ukryte:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Nie możesz anulować ukrywania wyskakującego okienka:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

Sprawdź, czy w górnej warstwie znajduje się wyskakujące okienko:

popoverElement.matches(':open')

Zapewnia to dodatkowe źródło energii w mniej typowych sytuacjach. Może to być na przykład wyskakujące okienko po okresie braku aktywności.

Ta wersja demonstracyjna zawiera wyskakujące okienka z dźwiękowymi trzaskami, dlatego do odtwarzania dźwięku będziemy potrzebować JavaScriptu. Po kliknięciu ukrywamy wyskakujące okienko, odtwarzamy dźwięk i wyświetlamy go ponownie.

Ułatwienia dostępu

W połączeniu z interfejsem Popover API ułatwienia dostępu stanowią priorytet. W razie potrzeby mapowania ułatwień dostępu łączą wyskakujące okienko z elementem reguły. Oznacza to, że nie musisz deklarować atrybutów aria-*, takich jak aria-haspopup, przy założeniu, że używasz jednego z atrybutów wywołujących, np. popovertoggletarget.

W przypadku zarządzania ostrością możesz użyć atrybutu autofokusa, aby przenieść zaznaczenie na element w wyskakującym okienku. Tak samo jak w przypadku okna dialogowego, ale różnica zachodzi po zwróceniu ostrości, która wynika z wyłączenia światła. W większości przypadków zamknięcie wyskakującego okienka przywraca zaznaczenie wcześniej zaznaczonego elementu. Po wyłączeniu światła zaznaczenie zostanie jednak przeniesione do klikniętego elementu, jeśli może on zostać zaznaczony. Zapoznaj się z sekcją na temat zarządzania fokusem w wyjaśnieniu.

Aby zobaczyć, jak działa ta wersja demonstracyjna, musisz otworzyć „wersję pełnoekranową”.

W tej wersji demonstracyjnej wyróżniony element ma zielony kontur. Spróbuj poruszać się klawiszami Tab za pomocą klawiatury. Zwróć uwagę, gdzie zaznaczenie jest zwracane po zamknięciu wyskakującego okienka. Po kliknięciu klawisza Tab możesz też zamknąć wyskakujące okienko. To z założenia. Wyskakujące okienka służą do zarządzania koncentracją, ale nie ograniczają koncentracji. Z kolei nawigacja za pomocą klawiatury rozpozna sygnał zamknięcia, gdy kursor zostanie przesunięty poza okienko.

Kotwiczenie (w trakcie opracowywania)

W przypadku popoverów trudnym wzorcem jest kotwiczenie elementu do reguły. Jeśli na przykład etykietka jest ustawiona na wyświetlanie nad wyzwalaczem, ale dokument zostanie przewinięty. Ta etykietka może zostać obcięta przez widoczny obszar. Obecnie dostępne są funkcje JavaScript, które pozwalają to rozwiązać, np. „Pływający interfejs”. Zmień pozycję etykietki, aby temu zapobiec i zastosować się w określonej kolejności pozycji.

Chcemy jednak, aby użytkownicy mogli to określić za pomocą stylów. Istnieje także dodatkowy interfejs API, który jest w trakcie opracowywania i służy do rozwiązania tego problemu. Interfejs API „CSS Anchor Positioning” (Pozycjonowanie zakotwiczonych elementów CSS) umożliwia powiązanie elementów z innymi elementami w taki sposób, aby zmieniał ich położenie tak, aby nie zostały ucięte w widocznym obszarze.

Ta wersja demonstracyjna używa interfejsu Anchoring API w obecnym stanie. Pozycja łodzi zależy od pozycji kotwicy w widocznym obszarze.

Oto fragment kodu CSS, który umożliwia działanie tej wersji demonstracyjnej. Obsługa JavaScriptu nie jest wymagana.

.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. Dla tego interfejsu API będzie dostępny kod polyfill.

Przykłady

Wiesz już, co potrafi popover i jak to zrobić, przyjrzyjmy się kilku przykładom.

Powiadomienia

Ta wersja demonstracyjna pokazuje powiadomienie „Kopiuj do schowka”.

• Używana strefa czasowa: [popover=manual].
• Wyskakujące okienko z motywem po działaniu: showPopover.
• Po upływie 2000ms czasu oczekiwania ukryj go za pomocą polecenia hidePopover.

Tosty

Ta wersja demonstracyjna wyświetla powiadomienia w stylu tostowym za pomocą górnej warstwy.

• Jedno okienko typu manual działa jako kontener.
• Nowe powiadomienia są dołączane do wyskakującego okienka i wyświetlane.
• Po kliknięciu są usuwane z interfejsu API animacji internetowych i z DOM.
• Jeśli nie ma żadnych powiadomień, wyskakujące okienko jest ukryte.

Zagnieżdżone menu

Ta wersja demonstracyjna pokazuje, jak może działać zagnieżdżone menu nawigacyjne.

• Użyj właściwości [popover=auto], ponieważ zezwala na zagnieżdżone wyskakujące okienka.
• Użyj autofocus na pierwszym linku każdego menu, aby poruszać się za pomocą klawiatury.
• Jest to idealna propozycja dla interfejsu CSS Anchoring API. W tej wersji demonstracyjnej możesz jednak użyć niewielkiej ilości kodu JavaScript do aktualizowania pozycji 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 autofocus, dlatego żeby nawigować przy użyciu klawiatury, trzeba będzie ją otworzyć w „widoku pełnoekranowym”.

Wyskakujące okienko multimediów

Ta prezentacja pokazuje, jak możesz otworzyć multimedia.

• Używa [popover=auto] do wyłączenia światła.
• JavaScript wykrywa zdarzenie play w filmie i wyświetla film.
• Zdarzenie popoverhide w wyskakującym okienku wstrzymuje odtwarzanie filmu.

Wyskakujące okienka w stylu Wiki

Ta wersja demonstracyjna pokazuje, jak tworzyć wbudowane etykietki treści z multimediami.

• Używana strefa czasowa: [popover=auto]. Pokazywanie jednego ukrywa innych, ponieważ nie jest przodkiem.
• Wyświetlane w witrynie pointerenter przy użyciu JavaScriptu.
• To kolejny idealny wybór dla interfejsu CSS Anchoring API.

Panel nawigacji

Ta wersja demonstracyjna tworzy panel nawigacji za pomocą wyskakującego okienka.

• Używa [popover=auto] do wyłączenia światła.
• Używa autofocus do zaznaczania pierwszego elementu nawigacji.

Zarządzanie tłami

Ta wersja demonstracyjna pokazuje, jak zarządzać tłami w wielu okienkach, w których chcesz wyświetlać tylko 1 element ::backdrop.

• Użyj JavaScriptu, by sporządzić listę wyskakujących okienek, które są widoczne.
• Zastosuj nazwę klasy do najniższego okienka w górnej warstwie.

Niestandardowe wyskakujące okienko kursora

Ta wersja demonstracyjna pokazuje, jak za pomocą popover przenieść canvas do górnej warstwy i używać go do wyświetlania kursora niestandardowego.

• Przenieś element canvas na górną warstwę za pomocą showPopover i [popover=manual].
• Gdy otwarte są inne wyskakujące okienka, ukryj i wyświetl wyskakujące okienko canvas, aby sprawdzić, czy znajduje się na górze.

Wyskakujące okienko arkusza działań

Ta prezentacja pokazuje, jak możesz użyć wyskakującego okienka jako arkusza działań.

• Zadbaj o to, aby wyskakujące okienko domyślnie zastąpiło pole display.
• Arkusz działań jest otwierany za pomocą przełącznika wyskakującego okienka.
• Po wyświetleniu wyskakującego okienka przesuwa się ono na górną warstwę i staje się widoczne.
• Można go użyć, by zwrócić.

Wyskakujące okienko aktywowane za pomocą klawiatury

Ten przykład pokazuje, jak można użyć wyskakującego okienka do interfejsu stylu palety poleceń.

• Aby wyświetlić wyskakujące okienko, użyj cmd + j.
• input koncentruje się na grupie autofocus.
• Pole kombi to drugi element popover umieszczony pod głównymi danymi wejściowymi.
• Jeśli nie ma menu, lampka zamyka paletę.
• Kolejny kandydat do korzystania z interfejsu Anchoring API

Wyskakujące okienko z sygnaturą czasową

Ta wersja demonstracyjna pokazuje wyskakujące okienko braku aktywności po 4 sekundach. Wzorzec interfejsu często używany w aplikacjach, które przechowują bezpieczne informacje o użytkowniku w celu wyświetlenia okna wylogowania.

• Użyj JavaScriptu, by wyświetlić wyskakujące okienko po okresie braku aktywności.
• Zresetuj minutnik po wyświetleniu się w wyskakującym okienku.

Wygaszacz ekranu

Podobnie jak w poprzedniej wersji demonstracyjnej, możesz dodać do swojej witryny odrobinę fantazji i dodać wygaszacz ekranu.

• Użyj JavaScriptu, by wyświetlić wyskakujące okienko po okresie braku aktywności.
• Wyłącz oświetlenie, aby ukryć i zresetować minutnik.

Podążanie przy użyciu kursora

Ten przykład pokazuje, jak możesz wstawić wyskakujące okienko, aby podążać za daszkiem danych wejściowych.

• Wyświetl wyskakujące okienko na podstawie wyboru, kluczowego zdarzenia lub wpisanego znaku specjalnego.
• Użyj JavaScriptu, aby zaktualizować położenie wyskakującego okienka za pomocą właściwości niestandardowych o zakresie.
• Taki schemat wymaga przemyślenia decyzji o tym, jakie treści i łatwość będą prezentowane.
• Często pojawia się w interfejsie edytowania tekstu i w aplikacjach, w których można oznaczać tagami.

Menu pływającego przycisku polecenia

Ten przykład pokazuje, jak za pomocą wyskakującego okienka zaimplementować pływające menu przycisku polecenia bez JavaScriptu.

• Promuj wyskakujące okienko typu manual za pomocą metody showPopover. To jest główny przycisk.
• Menu to kolejne wyskakujące okienko, które jest celem przycisku głównego.
• Menu jest otwarte w aplikacji popovertoggletarget.
• Użyj klawisza autofocus, aby zaznaczyć pierwszą pozycję menu.
• Lampka zamyka menu.
• Obrót ikony używa elementu :has(). Więcej informacji na temat :has() znajdziesz w tym artykule.

Znakomicie.

To jest wprowadzenie do popoveru, które staje się tworzone w ramach inicjatywy Open UI. Rozsądnie używana ta funkcja będzie stanowić doskonałe uzupełnienie platformy internetowej.

Wypróbuj Open UI. Wyjaśnienie wyskakującej reklamy jest aktualizowane wraz z rozwojem interfejsu API. Oto kolekcja na wszystkie wersje demonstracyjne.

Dziękuję za uwagę.

---

Fot. Madison Oren w programie Unsplash