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

Jhey Tompkins

Ziel der Open UI-Initiative ist es, Entwicklern die Erstellung einer guten User Experience zu erleichtern. Wir versuchen, die problematischsten Muster zu beheben, mit denen Entwickler konfrontiert sind. Das können wir erreichen, indem wir bessere integrierte APIs und Komponenten für die Plattform bereitstellen.

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

Pop-overs haben lange Zeit einen eher polarisierenden Ruf gehabt. Das liegt zum Teil daran, wie sie erstellt und bereitgestellt werden. Sie sind nicht einfach zu erstellen, können aber sehr nützlich sein, um Nutzer auf bestimmte Dinge hinzuweisen oder sie auf die Inhalte Ihrer Website aufmerksam zu machen – insbesondere, wenn sie geschmackvoll eingesetzt werden.

Beim Erstellen von Pop-overs gibt es oft zwei Hauptanliegen:

  • So platzieren Sie sie an einer geeigneten Stelle über den restlichen Inhalten.
  • Wie Sie sie zugänglich machen (Tastaturfreundlichkeit, Fokussierbarkeit usw.).

Die integrierte Popover API hat eine Reihe von Zielen, die alle darauf abzielen, Entwicklern die Erstellung dieses Musters zu erleichtern. Zu diesen Zielen gehören:

  • Ein Element und seine untergeordneten Elemente lassen sich so ganz einfach über dem Rest des Dokuments anzeigen.
  • Machen Sie es zugänglich.
  • Für die meisten gängigen Verhaltensweisen (z. B. das Schließen durch Tippen auf eine freie Stelle, Singleton, Stapeln) ist kein JavaScript erforderlich.

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

Browserkompatibilität

Wo kann die integrierte Popover API jetzt verwendet werden? Zum Zeitpunkt der Erstellung dieses Dokuments wird die Funktion in Chrome Canary hinter dem Flag „Experimental web platform features“ unterstützt.

Wenn Sie dieses Flag aktivieren möchten, öffnen Sie Chrome Canary und rufen Sie chrome://flags auf. Aktivieren Sie dann das Flag „Experimental web platform features“ (Experimentelle Webplattformfunktionen).

Für Entwickler, die diese Funktion in einer Produktionsumgebung testen möchten, gibt es auch einen Origin Trial.

Schließlich wird ein Polyfill für die API entwickelt. Das Repository finden Sie unter github.com/oddbird/popup-polyfill.

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 zu bewerben? Wenn Ihr Browser das HTML-Element „dialog“ unterstützt, können Sie es verwenden. Sie müssen es im Modal verwenden. Dafür ist JavaScript erforderlich.

Dialog.showModal();

Es gibt einige Aspekte der Barrierefreiheit, die berücksichtigt werden müssen. Es wird empfohlen, beispielsweise a11y-dialog zu verwenden, wenn Sie Nutzer von Safari unter Version 15.4 unterstützen möchten.

Sie können auch eine der vielen Bibliotheken verwenden, die auf Pop-overs, Benachrichtigungen oder Tooltips basieren. Viele dieser Tools funktionieren auf ähnliche Weise.

  • Hängen Sie dem Body einen Container an, um Pop-overs anzuzeigen.
  • Weisen Sie ihm einen Stil zu, sodass es über allen anderen Elementen liegt.
  • Erstellen Sie ein Element und hängen Sie es an den Container an, um ein Pop-over zu zeigen.
  • Blenden Sie es aus, indem Sie das Pop-over-Element aus dem DOM entfernen.

Dies erfordert eine zusätzliche Abhängigkeit und mehr Entscheidungen für Entwickler. Außerdem müssen Sie recherchieren, um ein Angebot zu finden, das alles bietet, was Sie benötigen. Die Popover API ist für viele Szenarien konzipiert, einschließlich Tooltips. Ziel ist es, alle diese gängigen Szenarien abzudecken, damit Entwickler nicht noch eine weitere Entscheidung treffen müssen und sich auf die Entwicklung ihrer Anwendungen konzentrieren können.

Ihr 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 Popover-Element nicht in einen Container einfügen – es ist standardmäßig ausgeblendet.
  • Sie müssen kein JavaScript schreiben, damit es angezeigt wird. Das wird über das Attribut popovertoggletarget gehandhabt.
  • Wenn sie angezeigt wird, wird sie in die oberste Ebene verschoben. Das bedeutet, dass sie über dem document im Darstellungsbereich beworben wird. Sie müssen z-index nicht verwalten und sich keine Gedanken darüber machen, wo sich Ihr Popover im DOM befindet. Es kann tief im DOM verschachtelt sein und Clipping-Ancestor-Elemente haben. Über die Entwicklertools können Sie auch sehen, welche Elemente sich derzeit in der obersten Ebene befinden. Weitere Informationen zur obersten Ebene

GIF, das die Unterstützung der obersten Ebene in DevTools zeigt

  • „Light Dismiss“ ist standardmäßig aktiviert. Das bedeutet, dass Sie das Pop-over mit einem Schließsignal schließen können, z. B. durch Klicken außerhalb des Pop-overs, durch Tastaturnavigation zu einem anderen Element oder durch Drücken der Esc-Taste. Öffnen Sie sie wieder und probieren Sie es aus.

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

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

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

Der Popover-Inhalt ist im DOM verschachtelt, aber wenn Sie den Popover öffnen, wird er über dem Element mit der festen Position angezeigt. Sie müssen keine Formatierungen festlegen.

Möglicherweise stellen Sie auch fest, dass das Popover jetzt ein ::backdrop-Pseudoelement hat. Alle Elemente in der obersten Ebene erhalten ein formatierbares ::backdrop-Pseudoelement. In diesem Beispiel wird ::backdrop mit einer Hintergrundfarbe mit reduziertem Alphawert und einem Hintergrundfilter formatiert, der den zugrunde liegenden Inhalt unkenntlich macht.

Pop‑over gestalten

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

[popover] { display: block; }
ansehen

Unabhängig davon, wie Sie Ihr Pop-over bewerben, müssen Sie es möglicherweise anordnen oder positionieren, sobald Sie es auf die oberste Ebene verschoben haben. Sie können nicht auf die oberste Ebene ausrichten und beispielsweise

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

Standardmäßig wird ein Pop-over mit margin: auto in der Mitte des Viewports platziert. In einigen Fällen kann es jedoch sinnvoll sein, die Positionierung explizit anzugeben. Beispiel:

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

Wenn Sie Inhalte in Ihrem Pop-over mit CSS-Grid oder Flexbox anordnen möchten, ist es möglicherweise sinnvoll, sie in ein Element einzuschließen. Andernfalls müssen Sie eine separate Regel deklarieren, die display ändert, sobald sich das Pop-over in der obersten Ebene befindet. Wenn die Option standardmäßig aktiviert wäre, würde sie standardmäßig angezeigt und display: none überschreiben.

[popover]:open {
 display: flex;
}

Wenn Sie die Demo ausprobiert haben, werden Sie feststellen, dass das Popover jetzt ein- und ausgeblendet wird. Sie können Pop-overs mit dem Pseudoselektor :open ein- und ausblenden. Der Pseudoselektor :open entspricht Pop-overs, die angezeigt werden (und sich daher in der obersten Ebene befinden).

In diesem Beispiel wird eine benutzerdefinierte Eigenschaft verwendet, um den Übergang zu steuern. Sie können auch einen Übergang auf die ::backdrop des Popovers 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;
}

Ein Tipp: Gruppieren Sie Übergänge und Animationen unter einer Media-Anfrage für Bewegung. So kannst du auch deine Zeitplanung besser einhalten. Das liegt daran, dass Sie keine Werte zwischen popover und ::backdrop über eine benutzerdefinierte Property teilen können.

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

Bisher haben Sie gesehen, wie popovertoggletarget verwendet wird, um ein Pop-over anzuzeigen. Zum Schließen verwenden wir „Light Dismiss“. Sie erhalten aber auch die Attribute popovershowtarget und popoverhidetarget, die Sie verwenden können. Wir fügen einem Popover eine Schaltfläche hinzu, mit der es ausgeblendet wird, und ändern die Umschaltfläche, sodass popovershowtarget verwendet wird.

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

Wie bereits erwähnt, umfasst die Popover API mehr als nur unsere bisherige Vorstellung von Pop-ups. Sie können für alle Arten von Szenarien entwickeln, z. B. für Benachrichtigungen, Menüs und Tooltips.

Für einige dieser Szenarien sind unterschiedliche Interaktionsmuster erforderlich. 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>

Die Idee ist, dass Sie den Mauszeiger auf ein Element bewegen, um das Ziel zu sehen. Dieses Verhalten kann über CSS-Eigenschaften konfiguriert werden. Mit diesen CSS-Eigenschaften wird das Zeitfenster für das Hovern über und das Entfernen des Mauszeigers von einem Element definiert, auf das ein Pop-over reagiert. Beim Standardverhalten, das getestet wurde, wurde nach einem expliziten 0.5s von :hover ein Pop-over angezeigt. Dann ist ein leichter Dismiss oder das Öffnen eines anderen Pop-overs erforderlich, um das Pop-over zu schließen (dazu später mehr). Das lag daran, dass die Dauer für das Ausblenden des Pop-overs auf Infinity festgelegt war.

In der Zwischenzeit können Sie diese Funktion mit JavaScript polyfillen.

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 die Aktion des Nutzers beabsichtigt ist (z. B. wenn ein Nutzer den Mauszeiger über ein Ziel bewegt). Wir möchten das Pop-up nur dann anzeigen, wenn das die Absicht des Nutzers ist.

In dieser Demo können Sie mit dem Mauszeiger auf das Ziel zeigen, während das Fenster auf 0.5s eingestellt ist.

Bevor wir uns einige häufige Anwendungsfälle und Beispiele ansehen, möchten wir noch ein paar Dinge klären.

Arten von Pop-overs

Wir haben das Interaktionsverhalten ohne JavaScript behandelt. Aber wie sieht es mit dem Pop-over-Verhalten insgesamt aus? Was ist, wenn Sie „Light Dismiss“ nicht möchten? Oder möchten Sie ein Singleton-Muster auf Ihre Pop-overs anwenden?

Mit der Popover API können Sie drei Arten von Popovers angeben, die sich im Verhalten unterscheiden.

[popover=auto]/[popover]:

  • Unterstützung für das Verschachteln. Das bedeutet nicht nur, dass sie im DOM verschachtelt sind. Ein Pop-over-Element ist ein Vorfahrenelement, wenn es folgende Eigenschaften hat:
    • die durch die DOM-Position (untergeordnet) in Beziehung stehen.
    • die durch Triggerattribute für untergeordnete Elemente wie popovertoggletarget, popovershowtarget usw. verknüpft sind.
    • über das Attribut anchor verknüpft (CSS Anchoring API in der Entwicklung).
  • Leichtes Schließen
  • Beim Öffnen werden andere Pop-overs geschlossen, die keine übergeordneten Pop-overs sind. In der Demo unten sehen Sie, wie das Verschachteln mit Ancestral-Pop-overs funktioniert. Sehen Sie sich an, wie sich die Dinge ändern, wenn Sie einige der popoverhidetarget-/popovershowtarget-Instanzen in popovertoggletarget ändern.
  • Wenn Sie eine Benachrichtigung leicht schließen, werden alle geschlossen. Wenn Sie eine Benachrichtigung im Stapel schließen, werden nur die darüber geschlossen.

[popover=manual]:

  • Andere Pop-overs werden nicht geschlossen.
  • Kein Light Dismiss.
  • Erfordert explizites Schließen über ein Triggerelement oder JavaScript.
ansehen

JavaScript API

Wenn Sie mehr Kontrolle über Ihre Pop-overs benötigen, können Sie JavaScript verwenden. Sie erhalten sowohl eine showPopover- als auch eine hidePopover-Methode. Außerdem können Sie die Ereignisse popovershow und popoverhide überwachen:

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

popoverElement.hidePopover()

Auf das Einblenden eines Popovers warten:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Auf das Einblenden eines Popovers warten und das Einblenden abbrechen:

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

Auf das Ausblenden eines Pop‑overs warten:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

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

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

Prüfen, ob sich ein Pop-over in der obersten Ebene befindet:

popoverElement.matches(':open')

So wird zusätzliche Leistung für einige weniger häufige Szenarien bereitgestellt. Sie können beispielsweise nach einer gewissen Zeit der Inaktivität ein Pop-over anzeigen.

In dieser Demo gibt es Pop-overs mit hörbaren Pops. Daher benötigen wir JavaScript, um das Audio abzuspielen. Beim Klicken wird das Pop-over ausgeblendet, die Audioausgabe gestartet und das Pop-over wieder eingeblendet.

Bedienungshilfen

Bei der Popover API steht die Barrierefreiheit im Vordergrund. Durch die Zuordnungen für Bedienungshilfen wird das Pop-over nach Bedarf mit dem zugehörigen Triggerelement verknüpft. Das bedeutet, dass Sie aria-*-Attribute wie aria-haspopup nicht deklarieren müssen, wenn Sie eines der Triggerattribute wie popovertoggletarget verwenden.

Für die Fokusverwaltung können Sie das Attribut „autofocus“ verwenden, um den Fokus auf ein Element in einem Pop-over zu verschieben. Das ist dasselbe wie bei einem Dialogfeld, aber der Unterschied besteht darin, dass der Fokus zurückgegeben wird. Das liegt daran, dass das Schließen durch Tippen auf eine beliebige Stelle möglich ist. In den meisten Fällen wird der Fokus beim Schließen eines Popovers auf das zuvor fokussierte Element zurückgesetzt. Der Fokus wird jedoch auf ein angeklicktes Element verschoben, wenn es fokussierbar ist. Weitere Informationen finden Sie im Abschnitt zur Fokusverwaltung in der Erklärung.

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. Versuchen Sie, mit der Tabulatortaste durch die Benutzeroberfläche zu navigieren. Achten Sie darauf, wohin der Fokus zurückkehrt, wenn ein Pop-over geschlossen wird. Möglicherweise haben Sie auch bemerkt, dass sich das Pop-over geschlossen hat, als Sie mit der Tabulatortaste durch die Seite navigiert haben. Das ist so gewollt. Obwohl Pop-overs die Fokusverwaltung unterstützen, wird der Fokus nicht eingeschränkt. 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 schwierig, das Element an seinen Trigger zu verankern. Wenn beispielsweise eine Kurzinfo so eingestellt ist, dass sie über ihrem Trigger angezeigt wird, das Dokument aber gescrollt wird. Der Tooltip wird möglicherweise durch den Viewport abgeschnitten. Es gibt aktuelle JavaScript-Angebote, um dieses Problem zu beheben, z. B. Floating UI. Das Tooltip wird dann neu positioniert, sodass dies nicht mehr passiert.

Wir möchten Ihnen aber die Möglichkeit geben, dies mit Ihren Stilen zu definieren. Neben der Popover API wird eine Companion API entwickelt, um dieses Problem zu beheben. Mit der API CSS Anchor Positioning können Sie Elemente an andere Elemente anbinden. Dabei werden Elemente so neu positioniert, dass sie nicht vom Viewport abgeschnitten werden.

In dieser Demo wird die Anchoring API in ihrem aktuellen Zustand verwendet. Die Position des Boots richtet sich nach der Position des Ankers im Darstellungsbereich.

Hier ist ein Ausschnitt des CSS, der für diese Demo verwendet wird. Kein JavaScript 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 Spezifikation. Es wird auch ein Polyfill für diese API geben.

Beispiele

Nachdem Sie nun wissen, was Popover zu bieten hat und wie es funktioniert, sehen wir uns einige Beispiele an.

Benachrichtigungen

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

  • Verwendet [popover=manual].
  • Pop-over mit showPopover anzeigen.
  • Blenden Sie das Overlay nach einem 2000ms-Zeitlimit mit hidePopover aus.

Toasts

In dieser Demo wird die oberste Ebene verwendet, um Benachrichtigungen im Toast-Stil anzuzeigen.

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

Verschachteltes Menü

In dieser Demo wird gezeigt, wie ein verschachteltes Navigationsmenü funktionieren könnte.

  • Verwenden Sie [popover=auto], da damit verschachtelte Pop-overs möglich sind.
  • Verwenden Sie autofocus für den ersten Link in jedem Drop-down-Menü, um mit der Tastatur zu navigieren.
  • Dies ist ein idealer Kandidat für die CSS Anchoring API. Für diese Demo können Sie jedoch mit wenig JavaScript die Positionen mithilfe von benutzerdefinierten Eigenschaften 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.

Media-Pop-over

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

  • Verwendet [popover=auto] für das Schließen durch Tippen.
  • JavaScript wartet auf das play-Ereignis des Videos und öffnet das Video.
  • Durch das Pop-over-Ereignis popoverhide wird das Video pausiert.

Wiki-Pop-overs

In dieser Demo wird gezeigt, wie Sie Inline-Content-Tooltips mit Media erstellen können.

  • Verwendet [popover=auto]. Wenn Sie eines auswählen, werden die anderen ausgeblendet, da sie nicht auf der gleichen Ebene liegen.
  • Wird auf pointerenter mit JavaScript angezeigt.
  • Ein weiterer idealer Kandidat für die CSS Anchoring API.

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

  • Verwendet [popover=auto] für das Schließen durch Tippen.
  • Verwendet autofocus, um das erste Navigationselement zu fokussieren.

Hintergründe verwalten

In dieser Demo wird gezeigt, wie Sie Hintergründe für mehrere Pop-overs verwalten können, wenn nur ein ::backdrop sichtbar sein soll.

  • Verwenden Sie JavaScript, um eine Liste der sichtbaren Pop-overs zu verwalten.
  • Wenden Sie einen Klassennamen auf das unterste Pop-over in der obersten Ebene an.

Pop-over für benutzerdefinierten Cursor

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

  • canvas mit showPopover und [popover=manual] in der obersten Ebene bewerben
  • Wenn andere Pop-over geöffnet sind, blenden Sie das canvas-Pop-over aus und wieder ein, um sicherzustellen, dass es oben angezeigt wird.

Pop-over mit Aktionsübersicht

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

  • Das Pop-over soll standardmäßig angezeigt werden und display überschreiben.
  • Das Aktionsblatt wird mit dem Popover-Trigger geöffnet.
  • Wenn das Pop-over angezeigt wird, wird es in die oberste Ebene verschoben und in die Ansicht übersetzt.
  • Mit der Option „Leicht schließen“ können Sie sie zurückgeben.

Pop-up-Fenster für aktivierte Tastatur

In dieser Demo wird gezeigt, wie Sie Pop-overs für eine Benutzeroberfläche im Stil der Befehlspalette verwenden können.

  • Mit cmd + j wird das Pop-over angezeigt.
  • Das input wird mit autofocus fokussiert.
  • Das Kombinationsfeld ist eine zweite popover, die sich unter der Haupteingabe befindet.
  • Durch leichtes Schließen wird die Palette geschlossen, wenn das Drop-down-Menü nicht vorhanden ist.
  • Ein weiterer Kandidat für die Anchoring API

Zeitgesteuerte Pop-overs

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 sichere Informationen über einen Nutzer enthalten, um ein Abmelde-Modal zu präsentieren.

  • Verwenden Sie JavaScript, um das Pop-over nach einer gewissen Zeit der Inaktivität anzuzeigen.
  • Setze den Timer zurück, wenn das Pop-up angezeigt wird.

Bildschirmschoner

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

  • Verwenden Sie JavaScript, um das Pop-over nach einer gewissen Zeit der Inaktivität anzuzeigen.
  • Durch leichtes Tippen wird der Timer ausgeblendet und zurückgesetzt.

Textcursor folgen

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

  • Das Pop-over wird basierend auf der Auswahl, einem Tastaturereignis oder der Eingabe eines Sonderzeichens angezeigt.
  • Verwenden Sie JavaScript, um die Position des Pop-overs mit benutzerdefinierten Eigenschaften mit Bereich zu aktualisieren.
  • Bei diesem Muster muss sorgfältig über die angezeigten Inhalte und die Barrierefreiheit nachgedacht werden.
  • Sie wird häufig in Benutzeroberflächen für die Textbearbeitung und in Apps verwendet, in denen Sie taggen können.

Menü der unverankerten Aktionsschaltfläche

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

  • Sie können ein Pop-over vom Typ manual mit der Methode showPopover bewerben. Das ist die Hauptschaltfläche.
  • Das Menü ist ein weiteres Pop-over, das das Ziel der Hauptschaltfläche ist.
  • Das Menü wird mit popovertoggletarget geöffnet.
  • Mit autofocus können Sie den ersten Menüpunkt auf dem Bildschirm fokussieren.
  • Durch leichtes Schließen wird das Menü geschlossen.
  • Für die Symbol-Twist-Funktion wird :has() verwendet. Weitere Informationen zu :has() finden Sie in diesem Artikel.

Geschafft!

Das war eine Einführung in Popover, das im Rahmen der Open UI-Initiative eingeführt wird. Bei sinnvoller Nutzung wird sie eine fantastische Ergänzung der Webplattform sein.

Sehen Sie sich Open UI an. Die Popover-Erklärung wird im Zuge der Weiterentwicklung der API aktualisiert. Hier finden Sie die Sammlung für alle Demos.

Vielen Dank für deinen Besuch!