Pop-ups: Sie sind plötzlich wieder da!

Jhey Tompkins

Das Ziel der Open UI-Initiative ist es, Entwicklern die Erstellung einer hervorragenden User Experience zu erleichtern. Dazu versuchen wir, die problematischsten Muster anzugehen, mit denen Entwickler konfrontiert sind. Dazu stellen wir bessere APIs und Komponenten bereit, die in die Plattform integriert sind.

Ein solches Problemfeld sind Pop-ups, die in Open UI als „Popovers“ bezeichnet werden.

Pop-ups haben seit langem einen eher polarisierenden Ruf. Dies liegt zum Teil an der Art und Weise, wie sie erstellt und bereitgestellt werden. Sie lassen sich zwar nicht einfach erstellen, haben aber einen großen Mehrwert: Sie leiten Nutzer auf bestimmte Dinge weiter oder machen sie auf den Inhalt Ihrer Website aufmerksam – insbesondere, wenn sie geschmackvoll eingesetzt werden.

Beim Erstellen von Pop-ups gibt es oft zwei Hauptprobleme:

  • Hier erfährst du, wie du dafür sorgst, dass es an einer geeigneten Stelle über den übrigen Inhalten platziert wird.
  • Wie Sie es barrierefrei gestalten (Tastaturfreundlich, fokussierbar usw.).

Die integrierte Popover API hat verschiedene Ziele, die alle auf dasselbe übergeordnete Ziel ausgerichtet sind: Entwicklern die Erstellung dieses Musters zu erleichtern. Zu diesen Zielen gehören:

  • Sie können ein Element und seine untergeordneten Elemente über dem Rest des Dokuments anzeigen lassen.
  • Sorgen Sie dafür, dass Ihre Inhalte barrierefrei sind.
  • Für die meisten gängigen Verhaltensweisen (z. B. Schließen mit einem einfachen Tippen, Singleton, Stapeln) ist kein JavaScript erforderlich.

Die vollständige Spezifikation für Pop-ups finden Sie auf der OpenUI-Website.

Browserkompatibilität

Wo kann ich die integrierte Popover API jetzt verwenden? Sie wird derzeit in Chrome Canary unter der Flagge „Experimentelle Webplattformfunktionen“ unterstützt.

Öffnen Sie dazu Chrome Canary und rufen Sie chrome://flags auf. Aktivieren Sie dann das Flag „Experimentelle Webplattformfunktionen“.

Für Entwickler, die die Funktion in einer Produktionsumgebung testen möchten, gibt es einen Origin-Test.

Für die API wird schließlich noch ein Polyfill entwickelt. Sehen Sie sich das Repository unter github.com/oddbird/popup-polyfill an.

So prüfen Sie, ob Pop-ups unterstützt werden:

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

Aktuelle Lösungen

Was kannst du derzeit tun, um deine Inhalte hervorzuheben? Wenn es in Ihrem Browser unterstützt wird, können Sie das HTML-Dialogfeldelement verwenden. In diesem Fall müssten Sie die Form „Modal“ verwenden. Dafür ist JavaScript erforderlich.

Dialog.showModal();

Bei der Barrierefreiheit sind einige Punkte zu beachten. Wir empfehlen, a11y-dialog zu verwenden, wenn Sie beispielsweise Nutzer von Safari-Versionen unter 15.4 unterstützen möchten.

Sie können auch eine der vielen Pop-up-, Benachrichtigungs- oder Tooltip-Bibliotheken verwenden. Viele davon funktionieren ähnlich.

  • Hängen Sie einen Container an den Textkörper an, um Pop-over anzuzeigen.
  • Formatieren Sie sie so, dass sie über allen anderen Elementen liegt.
  • Erstellen Sie ein Element und hängen Sie es an den Container an, um ein Pop-up anzuzeigen.
  • Entfernen Sie das Pop-over-Element aus dem DOM, um es auszublenden.

Dies erfordert eine zusätzliche Abhängigkeit und mehr Entscheidungen für Entwickler. Außerdem ist es wichtig, nach einem Angebot zu suchen, das alles bietet, was Sie benötigen. Die Popover API soll für viele Szenarien geeignet sein, einschließlich Kurzinfos. Das Ziel ist es, alle gängigen Szenarien abzudecken, damit Entwickler keine weitere Entscheidung treffen müssen, damit sie sich auf die Entwicklung ihrer Erfahrungen konzentrieren können.

Erstes Pop-up

Das ist alles, was Sie brauchen.

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

Aber was passiert hier?

  • Sie müssen das Pop-over-Element nicht in einen Container einfügen. Es ist standardmäßig ausgeblendet.
  • Sie müssen dazu keinen JavaScript-Code schreiben. Das wird vom Attribut popovertoggletarget verwaltet.
  • Wenn es erscheint, wird es in die oberste Ebene verschoben. Das bedeutet, dass sie im Darstellungsbereich über der document angezeigt wird. Sie müssen z-index nicht verwalten und sich keine Gedanken darüber machen, wo sich Ihr Pop-over im DOM befindet. Es könnte tief im DOM verschachtelt sein und überschneidende Vorfahren haben. In den DevTools können Sie auch sehen, welche Elemente sich derzeit in der obersten Schicht befinden. Weitere Informationen zur obersten Schicht finden Sie in diesem Artikel.

GIF, in dem die Unterstützung der obersten Schicht in DevTools demonstriert wird

  • „Light Dismiss“ ist bereits vorinstalliert. Das bedeutet, dass Sie das Pop-over mit einem Schließsignal schließen können, z. B. indem Sie außerhalb des Pop-overs klicken, mit der Tastatur zu einem anderen Element wechseln oder die Esc-Taste drücken. Öffnen Sie die App noch einmal und testen Sie sie.

Was bietet ein Pop-over noch? Sehen wir uns das Beispiel genauer an. Sehen wir uns diese Demo mit einigen Inhalten auf der Seite an.

Diese unverankerte Aktionsschaltfläche hat eine feste Position mit einem hohen z-index.

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

Der Pop-up-Inhalt ist im DOM verschachtelt, wird aber beim Öffnen des Pop-ups über das Element mit der festen Position angezeigt. Sie müssen keine Stile festlegen.

Beachten Sie auch, dass das Pop-over jetzt das Pseudoelement ::backdrop hat. Alle Elemente in der obersten Ebene erhalten ein stilisierbares ::backdrop-Pseudoelement. In diesem Beispiel wird ::backdrop mit einer reduzierten Alpha-Hintergrundfarbe und einem Hintergrundfilter gestaltet, der die zugrunde liegenden Inhalte verwischt.

Popover gestalten

Wenden wir uns nun dem Gestalten des Popovers zu. Standardmäßig hat ein Pop-over eine feste Position und ein gewisses Abstandselement. Er hat auch display: none. Sie können dies überschreiben, um ein Pop-over anzuzeigen. Dadurch wird es aber nicht in die oberste Ebene verschoben.

[popover] { display: block; }

Unabhängig davon, wie Sie Ihr Pop-over bewerben, müssen Sie es möglicherweise in der obersten Ebene anordnen oder positionieren. Ein Targeting auf die oberste Ebene ist nicht möglich,

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

Standardmäßig wird ein Pop-over mithilfe von margin: auto in der Mitte des Darstellungsbereichs platziert. In einigen Fällen sollten Sie die Positionierung jedoch explizit angeben. Beispiel:

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

Wenn Sie den Inhalt Ihres Pop-overs mit CSS-Grid oder Flexbox layouten möchten, sollten Sie ihn in ein Element einschließen. Andernfalls müssen Sie eine separate Regel deklarieren, die display ändert, sobald sich das Pop-over in der obersten Ebene befindet. Wenn Sie es als Standard festlegen, wird es standardmäßig angezeigt und überschreibt display: none.

[popover]:open {
 display: flex;
}

Wenn Sie diese Demo ausprobiert haben, werden Sie feststellen, dass das Pop-over jetzt ein- und ausgeht. Mit dem Pseudo-Sellektor :open können Sie Pop-ups ein- und ausblenden. Die Pseudoauswahl :open passt zu Pop-ups, die angezeigt werden (und sich daher in der obersten Schicht befinden).

In diesem Beispiel wird eine benutzerdefinierte Property für den Übergang verwendet. Sie können auch einen Übergang auf das ::backdrop des Pop-ups anwenden.

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

Hier empfiehlt es sich, Übergänge und Animationen in einer Medienabfrage für Bewegungen zu gruppieren. Das kann dir auch dabei helfen, dein Timing einzuhalten. Das liegt daran, dass Sie Werte nicht über eine benutzerdefinierte Property zwischen popover und ::backdrop teilen können.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

Bisher haben Sie die Verwendung von popovertoggletarget zum Einblenden eines Pop-overs gesehen. Zum Schließen verwenden wir „Light dismiss“. Sie erhalten aber auch die Attribute popovershowtarget und popoverhidetarget, die Sie verwenden können. Fügen wir einem Popover eine Schaltfläche hinzu, mit der es ausgeblendet wird, und ändern die Ein-/Aus-Schaltfläche in popovershowtarget.

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

Wie bereits erwähnt, deckt die Popover API nicht nur die klassische Definition von Pop-ups ab. Sie können für alle Arten von Szenarien wie Benachrichtigungen, Menüs, Kurzinfos usw. erstellen.

Einige dieser Szenarien erfordern unterschiedliche Interaktionsmuster. Interaktionen wie das Bewegen des Mauszeigers auf etwas Die Verwendung eines popoverhovertarget-Attributs wurde getestet, ist aber derzeit nicht implementiert.

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

Sie bewegen den Mauszeiger auf ein Element, um das Ziel anzuzeigen. Dieses Verhalten kann über CSS-Attribute konfiguriert werden. Mit diesen CSS-Eigenschaften wird der Zeitraum definiert, in dem das Pop-over angezeigt wird, wenn der Mauszeiger auf ein Element bewegt wird. Beim getesteten Standardverhalten wurde nach einer expliziten 0.5s von :hover ein Pop-up angezeigt. Dann ist ein einfaches Schließen oder das Öffnen eines anderen Pop-ups erforderlich, um es zu schließen. Weitere Informationen dazu folgen. Das lag daran, dass die Dauer für das Ausblenden des Pop-ups auf Infinity festgelegt war.

In der Zwischenzeit können Sie JavaScript verwenden, um diese Funktion mit Polyfill zu füllen.

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

Der Vorteil eines expliziten Hover-Fensters besteht darin, dass sichergestellt wird, dass die Aktion des Nutzers beabsichtigt ist (z. B. wenn ein Nutzer den Mauszeiger über ein Ziel bewegt). Wir möchten das Pop-up nur anzeigen, wenn das beabsichtigt ist.

In dieser Demo können Sie den Mauszeiger auf das Ziel bewegen, wenn das Fenster auf 0.5s festgelegt ist.

Bevor wir uns einige gängige Anwendungsfälle und Beispiele ansehen, sollten wir uns einige Dinge klarmachen.

Arten von Pop-ups

Wir haben Interaktionsverhalten ohne JavaScript behandelt. Aber wie sieht es mit dem Pop-over-Verhalten insgesamt aus? Was ist, wenn Sie die Option "Licht ausschalten" nicht möchten? Oder möchten Sie ein Singleton-Muster auf Ihre Popovers anwenden?

Mit der Popover API können Sie drei Popover-Typen angeben, die sich in ihrem Verhalten unterscheiden.

[popover=auto]/[popover]:

  • Unterstützung für Verschachtelung Das bedeutet nicht nur, dass sie im DOM verschachtelt sein müssen. Die Definition eines Stammbaum-Pop-ups:
    • über die DOM-Position (untergeordnet) verbunden sind.
    • durch Triggerattribute auf untergeordneten Elementen wie popovertoggletarget, popovershowtarget usw. miteinander verknüpft sind.
    • durch das Attribut anchor miteinander verknüpft sind (CSS Anchoring API in der Entwicklung).
  • Licht ausschalten.
  • Andere Popovers, die keine übergeordneten Popover sind, werden beim Öffnen geschlossen. Probieren Sie die Demo unten aus und zeigen Sie, wie das Nesting mit uralten Popovers funktioniert. Sehen Sie sich an, was passiert, wenn Sie einige der popoverhidetarget/popovershowtarget-Instanzen in popovertoggletarget ändern.
  • Wird eine Leuchte ausgeblendet, werden alle ausgeblendet, aber nur eine davon im Stapel.

[popover=manual]:

  • Schließt keine anderen Pop-ups.
  • Kein Licht aus.
  • Erfordert explizites Schließen über ein Triggerelement oder JavaScript.

JavaScript API

Wenn Sie mehr Kontrolle über Ihre Pop-ups haben möchten, können Sie JavaScript verwenden. Sie erhalten die Methode showPopover und hidePopover. Außerdem können Sie auf die Ereignisse popovershow und popoverhide achten:

Pop-over anzeigen js popoverElement.showPopover() Pop-over ausblenden:

popoverElement.hidePopover()

Auf das Einblenden eines Pop-overs achten:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Warte, bis ein Pop-over erscheint, und brich das Einblenden ab:

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

Achten Sie darauf, dass ein Pop-over ausgeblendet wird:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Sie können das Ausblenden eines Pop-ups nicht abbrechen:

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

Prüfen Sie, ob sich ein Pop-over im obersten Layer befindet:

popoverElement.matches(':open')

Dies bietet zusätzliche Leistung für einige weniger häufige Szenarien. Sie können beispielsweise ein Pop-over nach einem bestimmten Zeitraum der Inaktivität einblenden.

Diese Demo enthält Pop-ups mit hörbaren Pop-ups. Daher benötigen wir JavaScript, um die Audioinhalte abzuspielen. Beim Klicken wird das Pop-over ausgeblendet, die Audiodatei wird wiedergegeben und dann wieder angezeigt.

Bedienungshilfen

Bei der Popover API steht Barrierefreiheit im Vordergrund. Über Zuordnungen für Bedienungshilfen wird das Pop-over nach Bedarf mit dem Triggerelement verknüpft. Das bedeutet, dass du keine aria-*-Attribute wie aria-haspopup deklarieren musst, vorausgesetzt, du verwendest eines der auslösenden Attribute wie popovertoggletarget.

Für die Fokusverwaltung können Sie das Attribut „Autofokus“ verwenden, um den Fokus auf ein Element in einem Pop-over zu verschieben. Das ist bei einem Dialogfeld genauso, aber der Unterschied besteht beim Zurückgeben des Fokus. Das liegt an der leichten Schließung. In den meisten Fällen wird durch das Schließen eines Popovers wieder das zuvor fokussierte Element hervorgehoben. Der Fokus wird jedoch bei der leichten Schließung auf ein angeklicktes Element verschoben, sofern es den Fokus erhalten kann. Weitere Informationen finden Sie im Abschnitt zur Fokusverwaltung.

Sie müssen die Vollbildversion dieser Demo öffnen, um sie in Aktion zu sehen.

In dieser Demo erhält das fokussierte Element einen grünen Umriss. Probieren Sie, mit der Tastatur durch die Benutzeroberfläche zu wechseln. Achten Sie darauf, wohin der Fokus zurückgegeben wird, wenn ein Pop-over geschlossen wird. Möglicherweise haben Sie auch bemerkt, dass das Pop-over geschlossen wurde, wenn Sie den Tab gewechselt haben. Das ist so gewollt. Pop-ups haben zwar eine Fokusverwaltung, aber der Fokus wird nicht darauf fixiert. Bei der Tastaturnavigation wird ein Schließsignal erkannt, wenn der Fokus aus dem Pop-over verschoben wird.

Verankerung (in Entwicklung)

Bei Pop-overs ist es ein schwieriges Muster, das Element am Trigger zu verankern. Beispiel: Eine Kurzinfo soll über dem Trigger angezeigt werden, aber das Dokument wird gescrollt. Diese Kurzinfo könnte vom Darstellungsbereich abgeschnitten werden. Es gibt aktuelle JavaScript-Angebote, um mit diesem Problem umgehen zu können, zum Beispiel die Floating-Benutzeroberfläche. Sie platzieren die Kurzinfo neu, damit dies nicht mehr passiert, und achten auf eine gewünschte Positionierung.

Wir möchten jedoch, dass Sie dies mit Ihren Designs definieren können. Neben der Popover API wird derzeit eine Companion API entwickelt, um dieses Problem zu lösen. Mit der CSS Anchor Positioning API können Sie Elemente an andere Elemente binden. Dabei werden die Elemente so neu positioniert, dass sie nicht vom Darstellungsbereich abgeschnitten werden.

In dieser Demo wird die Anchoring API in ihrem aktuellen Zustand verwendet. Die Position des Bootes reagiert auf die Position des Ankers im Darstellungsbereich.

Hier sehen Sie ein CSS-Snippet, mit dem diese Demo funktioniert. JavaScript ist nicht erforderlich.

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

Hier finden Sie die technischen Daten. Es wird auch eine Polyfill für diese API geben.

Beispiele

Sie wissen jetzt, was ein Pop-over bietet und wie es funktioniert. Sehen wir uns nun einige Beispiele an.

Benachrichtigungen

In dieser Demo wird die Benachrichtigung „In Zwischenablage kopieren“ angezeigt.

  • Verwendet [popover=manual].
  • Pop-up für Aktion mit showPopover öffnen
  • Nach einer Zeitüberschreitung von 2000ms mit hidePopover ausblenden.

Toast

In dieser Demo werden in der obersten Schicht Benachrichtigungen im Toast-Format angezeigt.

  • Ein Pop-up vom Typ manual dient als Container.
  • Neue Benachrichtigungen werden an das Pop-up angehängt und es wird angezeigt.
  • Sie werden mit der Web Animations API beim Klicken entfernt und aus dem DOM entfernt.
  • Wenn keine Toasts angezeigt werden sollen, wird das Pop-up ausgeblendet.

Verschachteltes Menü

Diese Demo zeigt, wie ein verschachteltes Navigationsmenü funktionieren könnte.

  • Verwenden Sie [popover=auto], da damit verschachtelte Pop-ups möglich sind.
  • Verwenden Sie autofocus auf dem ersten Link jedes Drop-down-Menüs, um die Tastaturnavigation zu verwenden.
  • Dies ist ein perfekter Kandidat für die CSS-Anchoring API. Für diese Demo können Sie jedoch mithilfe von benutzerdefinierten Properties und ein wenig JavaScript die Positionen aktualisieren.
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));

Da in dieser Demo autofocus verwendet wird, muss sie für die Tastaturnavigation im Vollbildmodus geöffnet werden.

Pop-over für Medien

In dieser Demo wird gezeigt, wie Sie Medien einblenden können.

  • Verwendet [popover=auto] zum Schließen.
  • JavaScript wartet auf das Ereignis play des Videos und blendet es ein.
  • Das Ereignis „popoverhide“ des Pop-ups pausiert das Video.

Pop-ups im Wiki-Stil

In diesen Demos wird gezeigt, wie Sie Inline-Inhalts-Tooltips mit Medien erstellen können.

  • Verwendet [popover=auto]. Wenn Sie einen Stammbaum anzeigen, werden die anderen ausgeblendet, da sie nicht verwandt sind.
  • Wird auf pointerenter mit JavaScript angezeigt.
  • Ein weiterer perfekter Kandidat für die CSS-Anchoring API.

In dieser Demo wird eine Navigationsleiste mit einem Pop-over erstellt.

  • Verwendet [popover=auto] zum Schließen.
  • Mit autofocus wird das erste Navigationselement hervorgehoben.

Hintergründe verwalten

Diese Demo zeigt, wie Sie Hintergründe für mehrere Pop-over verwalten, bei denen nur ein ::backdrop sichtbar sein soll.

  • Verwenden Sie JavaScript, um eine Liste der sichtbaren Pop-ups zu verwalten.
  • Wenden Sie einen Klassennamen auf das unterste Popover im obersten Layer an.

Benutzerdefiniertes Pop-up für den Cursor

In dieser Demo wird gezeigt, wie Sie mit popover ein canvas in die oberste Ebene verschieben und damit einen benutzerdefinierten Cursor anzeigen.

  • Stufen Sie canvas mit showPopover und [popover=manual] auf die oberste Ebene.
  • Wenn andere Pop-ups geöffnet sind, minimieren und maximieren Sie das Pop-up für canvas, damit es immer oben angezeigt wird.

Pop-over für die Aktionstabelle

In dieser Demo wird gezeigt, wie Sie ein Pop-over als Aktionsleiste verwenden können.

  • Das Pop-up wird standardmäßig angezeigt und überschreibt display.
  • Das Actionsheet wird mit dem Popover-Trigger geöffnet.
  • Wenn das Pop-over eingeblendet wird, erscheint es auf der obersten Ebene und wird in die Ansicht übersetzt.
  • Sie können die Funktion „Licht ausschalten“ verwenden, um sie wieder zu schließen.

Durch Tastatur aktiviertes Pop-over

In dieser Demo wird gezeigt, wie Sie ein Pop-over als Benutzeroberfläche für den Stil der Befehlspalette verwenden können.

  • Mit cmd + j können Sie das Pop-over aufrufen.
  • Der Fokus des input liegt auf autofocus.
  • Das Drop-down-Menü ist eine zweite popover, die sich unter der Haupteingabe befindet.
  • Wenn kein Drop-down-Menü vorhanden ist, wird die Palette geschlossen.
  • Ein weiterer Kandidat für die Anchoring API

Zeitgesteuertes Pop-over

In dieser Demo wird nach vier Sekunden ein Pop-over für Inaktivität angezeigt. Ein UI-Muster, das häufig in Apps verwendet wird, die vertrauliche Informationen über einen Nutzer enthalten, um ein Modalfenster für die Abmeldung anzuzeigen.

  • Verwenden Sie JavaScript, um das Pop-over nach einem bestimmten Zeitraum der Inaktivität anzuzeigen.
  • Setze den Timer bei der Pop-over-Anzeige zurück.

Bildschirmschoner

Ähnlich wie in der vorherigen Demo können Sie Ihrer Website einen Hauch von Fantasie verleihen und einen Bildschirmschoner hinzufügen.

  • Verwenden Sie JavaScript, um das Pop-over nach einem bestimmten Zeitraum der Inaktivität anzuzeigen.
  • Ausschalten, um den Timer auszublenden und zurückzusetzen.

Caret-Folgen

In dieser Demo wird gezeigt, wie ein Pop-over einem Eingabecursor folgen kann.

  • Das Pop-over wird basierend auf einer Auswahl, einem Schlüsselereignis oder der Eingabe eines Sonderzeichens angezeigt.
  • Verwenden Sie JavaScript, um die Position des Popovers mit benutzerdefinierten Eigenschaften auf bestimmte Bereiche zu aktualisieren.
  • Bei diesem Muster müssen die angezeigten Inhalte und die Barrierefreiheit sorgfältig bedacht werden.
  • Sie werden häufig in der Benutzeroberfläche von Texteditoren und in Apps verwendet, in denen Nutzer Personen taggen können.

Menü der unverankerten Aktionsschaltfläche

In dieser Demo wird gezeigt, wie Sie mit einem Popover ein Menü für eine schwebende Aktionsschaltfläche ohne JavaScript implementieren können.

  • Pop-over des Typs manual mit der Methode showPopover hochstufen Das ist die Hauptschaltfläche.
  • Das Menü ist ein weiteres Pop-up, das das Ziel der Hauptschaltfläche ist.
  • Das Menü wird mit popovertoggletarget geöffnet.
  • Mit autofocus können Sie den ersten Menüpunkt im Display fokussieren.
  • Durch ein kurzes Wischen wird das Menü geschlossen.
  • Für die Drehung des Symbols wird :has() verwendet. Weitere Informationen zu :has() finden Sie in diesem Artikel.

Fertig!

Das war eine Einführung in Pop-ups, die im Rahmen der Open UI-Initiative in Zukunft noch kommen werden. Bei vernünftiger Verwendung ist es eine fantastische Ergänzung zur Webplattform.

Sehen Sie sich Open UI an. Die Pop-up-Erläuterung wird mit der Weiterentwicklung der API aktualisiert. Hier finden Sie alle Demos.

Vielen Dank für deinen Besuch.

Foto von Madison Oren auf Unsplash