Wyskakujące okienka: powraca do popularności!

Jhey Tompkins

.

Celem inicjatywy Open UI jest ułatwienie deweloperom tworzenia aplikacji, które zapewniają użytkownikom jak najlepsze wrażenia. W tym celu staramy się rozwiązywać bardziej problematyczne wzorce, z którymi spotykają się deweloperzy. Możemy to zrobić, udostępniając lepsze wbudowane interfejsy API i komponenty platformy.

Jednym z takich obszarów problemowych są wyskakujące okienka, które w Open UI są określane jako „Popovers”.

Wyskakujące okienka od dawna cieszą się dość kontrowersyjną reputacją. Wynika to częściowo ze sposobu ich tworzenia i wdrażania. Nie jest to łatwy wzorzec do prawidłowego wdrożenia, ale może przynieść wiele korzyści, kierując użytkowników do określonych elementów lub informując ich o treściach w witrynie – zwłaszcza jeśli jest stosowany w przemyślany sposób.

Podczas tworzenia wyskakujących okienek często pojawiają się 2 główne problemy:

  • Jak zadbać o to, aby pojawił się on nad pozostałymi treściami w odpowiednim miejscu.
  • Jak sprawić, by był dostępny (można go było obsługiwać za pomocą klawiatury, zaznaczać itp.).

Wbudowany interfejs Popover API ma różne cele, ale wszystkie sprowadzają się do tego, aby ułatwić programistom tworzenie tego wzorca. Do najważniejszych z nich należą:

  • Ułatwia wyświetlanie elementu i jego elementów podrzędnych nad resztą dokumentu.
  • Zadbaj o dostępność.
  • Nie wymaga JavaScriptu w przypadku większości typowych zachowań (zamykanie przez kliknięcie poza elementem, singleton, układanie w stos i inne).

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 momencie pisania tego artykułu jest ona obsługiwana w Chrome Canary za flagą „Eksperymentalne funkcje platformy internetowej”.

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

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

Ostatnim elementem jest polyfill, który jest opracowywany na potrzeby interfejsu API. Repozytorium znajdziesz na stronie github.com/oddbird/popup-polyfill.

Możesz sprawdzić, czy wyskakujące okienka są obsługiwane:

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

Obecne rozwiązania

Co możesz teraz zrobić, aby promować swoje treści ponad wszystko inne? Jeśli Twoja przeglądarka obsługuje element HTML Dialog, możesz go użyć. Musisz użyć go w formie „okna modalnego”. Do korzystania z tej funkcji wymagany jest JavaScript.

Dialog.showModal();

Należy wziąć pod uwagę pewne kwestie związane z ułatwieniami dostępu. Zalecamy używanie np. a11y-dialog, jeśli chcesz obsługiwać użytkowników przeglądarki Safari w wersji starszej niż 15.4.

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

  • Dołączanie kontenera do treści strony w celu wyświetlania wyskakujących okienek.
  • Ustaw go tak, aby znajdował się nad wszystkimi innymi elementami.
  • Utwórz element i dołącz go do kontenera, aby wyświetlić wyskakujące okienko.
  • Ukryj go, usuwając element wyskakującego okienka z DOM.

Wymaga to dodatkowej zależności i większej liczby decyzji ze strony deweloperów. Wymaga to też wyszukania oferty, która zapewni Ci wszystko, czego potrzebujesz. Interfejs Popover API jest przeznaczony do wielu scenariuszy, w tym do wyświetlania etykietek. Chcemy uwzględnić wszystkie typowe scenariusze, aby deweloperzy nie musieli podejmować kolejnych decyzji i mogli skupić się na tworzeniu aplikacji.

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 niczego podobnego – jest on domyślnie ukryty.
  • Aby się pojawił, nie musisz pisać żadnego kodu JavaScript. Zajmuje się tym atrybut popovertoggletarget.
  • Gdy się pojawi, zostanie przeniesiony na górną warstwę. Oznacza to, że jest promowany powyżej document w widocznym obszarze. Nie musisz zarządzać elementem z-index ani martwić się o to, gdzie w DOM znajduje się wyskakujące okienko. Może być głęboko zagnieżdżony w DOM, z elementami nadrzędnymi, które przycinają jego zawartość. Za pomocą Narzędzi deweloperskich możesz też sprawdzić, które elementy znajdują się obecnie na wierzchniej warstwie. Więcej informacji o najwyższej warstwie znajdziesz w tym artykule.

GIF przedstawiający obsługę warstwy najwyższej w Narzędziach deweloperskich

  • Funkcja „Light Dismiss” jest dostępna od razu. Oznacza to, że możesz zamknąć wyskakujące okienko za pomocą sygnału zamknięcia, np. klikając poza nim, przechodząc za pomocą klawiatury do innego elementu lub naciskając klawisz Esc. Otwórz ją ponownie i wypróbuj.

Co jeszcze zyskujesz dzięki wyskakującemu okienku? Rozwińmy ten przykład. Obejrzyj tę prezentację z treściami na stronie.

Ten pływający przycisk polecenia ma stałe położenie i wysoki wynik z-index.

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

Treść wyskakującego okienka jest zagnieżdżona w DOM, ale po otwarciu wyskakującego okienka jest wyświetlana nad elementem o stałej pozycji. Nie musisz ustawiać żadnych stylów.

Możesz też zauważyć, że wyskakujące okienko ma teraz pseudoelement ::backdrop. Wszystkie elementy znajdujące się w najwyższej warstwie otrzymują stylizowany pseudoelement ::backdrop. W tym przykładzie element ::backdrop ma kolor tła z mniejszą wartością alfa i filtr tła, który rozmywa treści znajdujące się pod nim.

Stylizowanie wyskakującego okienka

Skupmy się teraz na stylowaniu wyskakującego okienka. Domyślnie wyskakujące okienko ma stałą pozycję i zastosowane dopełnienie. Ma też display: none. Możesz to zastąpić, aby wyświetlić wyskakujące okienko. Nie spowoduje to jednak przeniesienia go na najwyższą warstwę.

[popover] { display: block; }

Niezależnie od tego, jak promujesz wyskakujące okienko, po przeniesieniu go na najwyższą warstwę może być konieczne jego rozmieszczenie lub ustawienie. Nie możesz kierować reklam na górną warstwę i wykonywać takich działań jak

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

Domyślnie wyskakujące okienko jest wyświetlane na środku obszaru widocznego za pomocą margin: auto. W niektórych przypadkach możesz jednak chcieć wyraźnie określić pozycjonowanie. 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 flexbox, warto umieścić ją w elemencie. W przeciwnym razie musisz zadeklarować osobną regułę, która zmieni display, gdy wyskakujące okienko znajdzie się na górnej warstwie. Ustawienie go domyślnie spowoduje, że będzie wyświetlany domyślnie, zastępując display: none.

[popover]:open {
 display: flex;
}

Jeśli wypróbujesz tę wersję demonstracyjną, zauważysz, że wyskakujące okienko pojawia się i znika. Możesz włączać i wyłączać wyskakujące okienka za pomocą pseudoselektora :open. Pseudoselektor :open pasuje do wyskakujących okienek, które są wyświetlane (a więc znajdują się na górnej warstwie).

W tym przykładzie do sterowania przejściem używana jest właściwość niestandardowa. Możesz też zastosować przejście do ::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: zgrupuj przejścia i animacje w ramach zapytania o multimedia dotyczące ruchu. Może to też pomóc w utrzymaniu odpowiedniego tempa. Dzieje się tak, ponieważ nie można udostępniać wartości między usługami 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 używaliśmy symbolu popovertoggletarget, aby wyświetlać wyskakujące okienko. Aby ją zamknąć, używamy funkcji „Light dismiss”. Masz jednak do dyspozycji atrybuty popovershowtarget i popoverhidetarget. Dodajmy do wyskakującego okienka przycisk, który je ukryje, i zmieńmy przycisk przełączania, aby używał ikony popovershowtarget.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

Jak wspomnieliśmy wcześniej, interfejs Popover API obejmuje więcej niż tylko nasze historyczne pojęcie wyskakujących okienek. Możesz tworzyć komponenty do wszystkich rodzajów scenariuszy, takich jak powiadomienia, menu, etykietki itp.

Niektóre z tych scenariuszy wymagają różnych wzorców interakcji. interakcje, takie jak najechanie kursorem; Użycie atrybutu popoverhovertarget było testowane, ale nie zostało jeszcze wdrożone.

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

Chodzi o to, aby po najechaniu kursorem na element 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 najedziesz kursorem na element i z niego zjedziesz, na co reaguje wyskakujące okienko. W eksperymencie z działaniem domyślnym wyskakujące okienko pojawiało się po wyraźnym 0.5s o wartości :hover. W takim przypadku trzeba będzie zamknąć wyskakujące okienko, klikając poza nim, lub otworzyć inne wyskakujące okienko (więcej informacji na ten temat znajdziesz poniżej). Było to spowodowane ustawieniem czasu ukrywania wyskakującego okienka na Infinity.

W międzyczasie możesz użyć JavaScriptu, aby uzupełnić tę funkcję.

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

Ustawienie jawnego okna najazdu kursorem zapewnia, że działanie użytkownika jest zamierzone (np. użytkownik przesuwa wskaźnik nad elementem docelowym). Nie chcemy wyświetlać wyskakującego okienka, jeśli nie jest to zamierzone.

Wypróbuj tę wersję demonstracyjną, w której możesz najechać kursorem na cel, gdy okno jest ustawione na 0.5s.

Zanim przejdziemy do typowych przypadków użycia i przykładów, omówmy kilka kwestii.

Rodzaje wyskakujących okienek

Omówiliśmy zachowania związane z interakcjami innymi niż JavaScript. Ale co z zachowaniem wyskakujących okien jako całości? Co zrobić, jeśli nie chcesz korzystać z funkcji „Lekkie odrzucanie”? A może chcesz zastosować wzorzec singleton do wyskakujących okienek?

Interfejs Popover API umożliwia określenie 3 typów wyskakujących okienek, które różnią się zachowaniem.

[popover=auto]/[popover]:

  • Obsługa umieszczania. Nie chodzi tu tylko o zagnieżdżenie w DOM. Wyskakujące okienko nadrzędne to takie, które:
    • powiązane pozycją w DOM (element podrzędny);
    • powiązane przez atrybuty wyzwalające w elementach podrzędnych, takie jak popovertoggletarget, popovershowtarget itp.
    • powiązane atrybutem anchor (interfejs CSS Anchoring API w trakcie opracowywania).
  • Lekkie zamknięcie.
  • Otwarcie powoduje zamknięcie innych wyskakujących okienek, które nie są wyskakującymi okienkami nadrzędnymi. Wypróbuj poniższą wersję demonstracyjną, która pokazuje, jak działa zagnieżdżanie z wyskakującymi okienkami nadrzędnymi. Zobacz, jak zmieni się sytuacja, gdy niektóre wystąpienia popoverhidetarget/popovershowtarget zastąpisz znakiem popovertoggletarget.
  • Lekkie odrzucenie jednego powiadomienia powoduje odrzucenie wszystkich, ale odrzucenie jednego powiadomienia w stosie powoduje odrzucenie tylko tych, które znajdują się nad nim.

[popover=manual]:

  • Nie zamyka innych wyskakujących okienek.
  • Brak wyłączenia oświetlenia.
  • Wymaga jawnego zamknięcia za pomocą elementu wywołującego lub JavaScriptu.

JavaScript API

Jeśli potrzebujesz większej kontroli nad wyskakującymi okienkami, możesz użyć JavaScriptu. Masz do dyspozycji metody showPopover i hidePopover. Możesz też nasłuchiwać zdarzeń popovershow i popoverhide:

Wyświetlanie wyskakującego okienka:js popoverElement.showPopover()Ukrywanie wyskakującego okienka:

popoverElement.hidePopover()

Sprawdź, czy wyświetla się wyskakujące okienko:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Nasłuchuj wyświetlenia wyskakującego okienka i anuluj jego wyświetlenie:

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

Nasłuchiwanie ukrywania wyskakującego okienka:

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 wyskakujące okienko znajduje się w najwyższej warstwie:

popoverElement.matches(':open')

Zapewnia to dodatkową moc w niektórych mniej typowych sytuacjach. Możesz na przykład wyświetlić wyskakujące okienko po okresie bezczynności.

W tym przykładzie są wyskakujące okienka z słyszalnymi dźwiękami, więc do odtworzenia dźwięku potrzebujemy JavaScriptu. Po kliknięciu ukrywamy wyskakujące okienko, odtwarzamy dźwięk, a następnie ponownie je wyświetlamy.

Ułatwienia dostępu

Interfejs Popover API został zaprojektowany z myślą o ułatwieniach dostępu. Mapowania ułatwień dostępu w razie potrzeby łączą wyskakujące okienko z elementem wywołującym. Oznacza to, że nie musisz deklarować atrybutów aria-*, takich jak aria-haspopup, jeśli używasz jednego z atrybutów wywołujących, np. popovertoggletarget.

Do zarządzania zaznaczeniem możesz użyć atrybutu autofocus, aby przenieść zaznaczenie na element wewnątrz wyskakującego okienka. Działa tak samo jak w przypadku okna, ale różnica pojawia się podczas przywracania fokusu, ponieważ okno można zamknąć przez kliknięcie poza nim. W większości przypadków zamknięcie wyskakującego okienka powoduje powrót do wcześniej aktywnego elementu. Jeśli jednak kliknięty element może zostać zaznaczony, po zamknięciu lekkim kliknięciem zostanie on zaznaczony. Zapoznaj się z sekcją dotyczącą zarządzania ostrością w wyjaśnieniu.

Aby zobaczyć, jak działa ta wersja demonstracyjna, musisz otworzyć jej wersję na pełnym ekranie.

W tej wersji demonstracyjnej zaznaczony element ma zielone obramowanie. Spróbuj poruszać się po interfejsie za pomocą klawiatury. Zwróć uwagę, gdzie wraca fokus po zamknięciu wyskakującego okienka. Możesz też zauważyć, że po przejściu do innego elementu za pomocą klawisza Tab wyskakujące okienko zostało zamknięte. To celowe. Chociaż wyskakujące okienka mają funkcję zarządzania skupieniem, nie blokują go. Nawigacja za pomocą klawiatury rozpoznaje sygnał zamknięcia, gdy zaznaczenie zostanie przeniesione poza wyskakujące okienko.

Utwierdzenie pozycji (w fazie rozwoju)

W przypadku wyskakujących okienek trudnym do zrealizowania wzorcem jest zakotwiczenie elementu do jego wyzwalacza. Na przykład, gdy etykietka ma się wyświetlać nad elementem wywołującym, ale dokument zostanie przewinięty. Etykietka może zostać ucięta przez obszar widoczny. Obecnie dostępne są rozwiązania w JavaScript, które radzą sobie z tym problemem, np. „Floating UI”. Zmienią położenie etykietki, aby temu zapobiec, i będą polegać na wybranej kolejności pozycji.

Chcemy jednak, aby można było zdefiniować to za pomocą stylów. Wraz z interfejsem Popover API opracowywany jest powiązany interfejs API, który ma rozwiązać ten problem. Interfejs API „CSS Anchor Positioning” umożliwi Ci przywiązywanie elementów do innych elementów. Będzie to robić w taki sposób, aby zmieniać położenie elementów i zapobiegać ich obcinaniu przez obszar widoczny.

Wersja demonstracyjna korzysta z interfejsu Anchoring API w jego obecnej postaci. Pozycja łodzi jest dostosowywana do pozycji kotwicy w widocznym obszarze.

Oto fragment kodu CSS, który umożliwia działanie tej wersji demonstracyjnej. 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 Dostępny będzie też polyfill dla tego interfejsu API.

Przykłady

Wiesz już, co oferuje wyskakujące okienko i jak działa. Przyjrzyjmy się teraz kilku przykładom.

Powiadomienia

Wersja demonstracyjna pokazuje powiadomienie „Skopiowano do schowka”.

  • Używana strefa czasowa: [popover=manual].
  • Po wykonaniu działania wyświetl wyskakujące okienko z showPopover.
  • Po 2000ms sekundach ukryj go za pomocą hidePopover.

Toasty

W tej wersji demonstracyjnej do wyświetlania powiadomień w stylu toastów używana jest warstwa najwyższa.

  • Jeden wyskakujący element z typem manual działa jako kontener.
  • Nowe powiadomienia są dodawane do wyskakującego okienka, które jest wyświetlane.
  • Są one usuwane za pomocą interfejsu Web Animations API po kliknięciu i usuwane z DOM.
  • Jeśli nie ma powiadomień do wyświetlenia, wyskakujące okienko jest ukryte.

Menu zagnieżdżone

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

  • Użyj elementu [popover=auto], ponieważ umożliwia on zagnieżdżone wyskakujące okienka.
  • Aby nawigować za pomocą klawiatury, użyj autofocus w przypadku pierwszego linku w każdym menu.
  • To idealny przykład zastosowania interfejsu CSS Anchoring API. W tym przykładzie możesz jednak użyć niewielkiej ilości kodu JavaScript, aby zaktualizować 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 ponieważ ta wersja demonstracyjna korzysta z autofocus, do nawigacji za pomocą klawiatury musisz ją otworzyć w widoku pełnoekranowym.

Wyskakujące okienko multimediów

Ta prezentacja pokazuje, jak można wyświetlać multimedia w wyskakującym okienku.

  • Używa [popover=auto] do lekkiego odrzucania.
  • JavaScript nasłuchuje zdarzenia play filmu i wyświetla go.
  • Wyskakujące okienka popoverhide wstrzymują odtwarzanie filmu.

Wyskakujące okienka w stylu wiki

Ten przykład pokazuje, jak tworzyć dymki z narzędziami do edycji treści wstawiane w tekście, które zawierają multimedia.

  • Używana strefa czasowa: [popover=auto]. Wyświetlenie jednego z nich powoduje ukrycie pozostałych, ponieważ nie są one przodkami.
  • Wyświetlane w witrynie pointerenter za pomocą JavaScriptu.
  • Kolejny idealny kandydat do interfejsu CSS Anchoring API.

Wersja demonstracyjna tworzy panel nawigacyjny za pomocą wyskakującego okienka.

  • Używa [popover=auto] do lekkiego odrzucania.
  • Używa autofocus, aby zaznaczyć pierwszy element nawigacyjny.

Zarządzanie tłami

Wersja demonstracyjna pokazuje, jak zarządzać tłem wielu wyskakujących okien, gdy chcesz, aby widoczne było tylko jedno ::backdrop.

  • Użyj JavaScriptu, aby prowadzić listę widocznych wyskakujących okienek.
  • Zastosuj nazwę klasy do najniższego wyskakującego okienka w najwyższej warstwie.

Wyskakujące okienko kursora niestandardowego

Ta prezentacja pokazuje, jak używać popover do promowania canvas na najwyższą warstwę i wykorzystywać ją do wyświetlania niestandardowego kursora.

  • Promuj canvas do najwyższej warstwy za pomocą showPopover i [popover=manual].
  • Gdy otworzą się inne wyskakujące okienka, ukryj i pokaż wyskakujące okienko canvas, aby upewnić się, że jest na wierzchu.

Wyskakujące okienko arkusza działań

Ten przykład pokazuje, jak używać wyskakującego okienka jako arkusza działań.

  • Domyślnie wyświetlaj wyskakujące okienko, zastępując display.
  • Arkusz działań jest otwierany za pomocą wyzwalacza wyskakującego okienka.
  • Gdy wyskakujące okienko jest wyświetlane, jest przenoszone na najwyższą warstwę i przesuwane do widoku.
  • Aby ją przywrócić, możesz użyć funkcji lekkiego zamykania.

Wyskakujące okienko aktywowane klawiaturą

Ta prezentacja pokazuje, jak można użyć wyskakującego okienka w interfejsie w stylu palety poleceń.

  • Aby wyświetlić wyskakujące okienko, naciśnij cmd + j.
  • Wartość input jest ustawiona na autofocus.
  • Pole kombi to drugie pole popover umieszczone pod głównym polem wejściowym.
  • Lekkie zamknięcie zamyka paletę, jeśli menu nie jest widoczne.
  • Kolejny kandydat do interfejsu Anchoring API

Wyskakujące okienko wyświetlane z opóźnieniem

W tym demo po 4 sekundach braku aktywności pojawia się wyskakujące okienko. Wzorzec interfejsu często używany w aplikacjach, które przechowują bezpieczne informacje o użytkowniku, do wyświetlania okna wylogowania.

  • Użyj JavaScriptu, aby wyświetlić wyskakujące okienko po okresie bezczynności.
  • Po wyświetleniu wyskakującego okienka zresetuj minutnik.

Wygaszacz ekranu

Podobnie jak w przypadku poprzedniej wersji demonstracyjnej możesz dodać do witryny wygaszacz ekranu, aby nadać jej nieco fantazji.

  • Użyj JavaScriptu, aby wyświetlić wyskakujące okienko po okresie bezczynności.
  • Lekkie przesunięcie, aby ukryć i zresetować minutnik.

Śledzenie kursora

Ta wersja demonstracyjna pokazuje, jak wyskakujące okienko może podążać za kursorem wprowadzania.

  • Wyświetlanie wyskakującego okienka na podstawie wyboru, kluczowego zdarzenia lub wprowadzenia znaku specjalnego.
  • Użyj JavaScriptu, aby zaktualizować pozycję wyskakującego okienka za pomocą właściwości niestandardowych o ograniczonym zakresie.
  • Ten wzorzec wymaga starannego przemyślenia wyświetlanych treści i ułatwień dostępu.
  • Jest często spotykany w interfejsach edytorów tekstu i aplikacjach, w których można dodawać tagi.

Menu pływającego przycisku polecenia

Ten przykład pokazuje, jak za pomocą elementu popover zaimplementować menu pływającego przycisku polecenia (FAB) bez użycia JavaScriptu.

  • Promuj wyskakujące okienko typu manual za pomocą metody showPopover. To główny przycisk.
  • Menu to kolejne wysuwane okienko, które jest celem głównego przycisku.
  • Menu jest otwierane za pomocą popovertoggletarget.
  • Naciśnij autofocus, aby zaznaczyć pierwszą wyświetlaną pozycję menu.
  • Lekkie zamknięcie zamyka menu.
  • Ikona wykorzystuje :has(). Więcej informacji o :has() znajdziesz w tym artykule.

To wszystko.

To wprowadzenie do wyskakującego okienka, które pojawi się w ramach inicjatywy Open UI. Używana z rozsądkiem będzie fantastycznym dodatkiem do platformy internetowej.

Zapoznaj się z Open UI. Wyjaśnienie w wyskakującym okienku jest aktualizowane wraz z rozwojem interfejsu API. A tutaj znajdziesz kolekcję wszystkich wersji demonstracyjnych.

Dziękujemy za odwiedziny!