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

Jhey Tompkins

Achtung:Im Rahmen der Open UI-Initiative wurde am 27. Oktober 2022 das Attribut für die Popover API von popup zu popover geändert. Diese Änderungsanfrage wurde am 3. November 2022 mit Chromium zusammengeführt. Die Referenzen wurden aktualisiert, um die neue Namenskonvention popover zu verwenden.

Das Ziel der Open UI-Initiative ist es, Entwicklern die Erstellung großartiger Nutzererfahrungen zu erleichtern. Zu diesem Zweck versuchen wir, die problematischen Muster anzugehen, mit denen Entwickler konfrontiert sind. Dazu stellen wir bessere, in die Plattform integrierte APIs und Komponenten bereit.

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

Popovers haben schon lange einen polarisierenden Ruf. Dies liegt zum Teil an der Art und Weise, wie sie erstellt und bereitgestellt werden. Es ist kein einfaches Muster, gut zu erstellen, aber sie können einen großen Mehrwert bieten, indem sie Nutzer zu bestimmten Dingen weiterleiten oder auf den Inhalt Ihrer Website aufmerksam machen – insbesondere, wenn sie geschmackvoll eingesetzt werden.

Beim Erstellen von Popovers gibt es oft zwei wichtige Bedenken:

• So stellst du sicher, dass es an der richtigen Stelle über deinen anderen Inhalten platziert wird.
• Wie man die Inhalte barrierefrei gestalten kann (für die Tastatur geeignet, fokussierbar usw.)

Die integrierte Popover API hat eine Vielzahl von Zielen mit dem gleichen übergeordneten Ziel, Entwicklern die Erstellung dieses Musters zu erleichtern. Wichtige dieser Ziele sind:

• Sorgen Sie dafür, dass ein Element und seine Nachfolgerelemente über dem Rest des Dokuments angezeigt werden.
• Machen Sie sie barrierefrei.
• JavaScript ist für die häufigsten Verhaltensweisen nicht erforderlich (Licht schließen, Singleton, Stapeln usw.).

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

Browserkompatibilität

Wo können Sie jetzt die integrierte Popover API verwenden? Sie wird in Chrome Canary hinter der Markierung „Experimental web platform features“ (Experimentelle Webplattformfunktionen) zum Zeitpunkt der Erstellung dieses Dokuments unterstützt.

Öffnen Sie zum Aktivieren dieses Flags Chrome Canary und rufen Sie chrome://flags auf. Aktivieren Sie dann das Flag „Experimental web platform features“.

Für Entwickler, die dies in einer Produktionsumgebung testen möchten, gibt es auch einen Ursprungstest.

Für die API befindet sich außerdem ein polyfill in der Entwicklung. Sie können sich das Repository unter github.com/oddbird/popup-polyfill ansehen.

Sie können folgendermaßen prüfen, ob ein Pop-up-Fenster unterstützt wird:

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

Aktuelle Lösungen

Wie kannst du aktuell Werbung für deine Inhalte machen? Wenn es in Ihrem Browser unterstützt wird, können Sie das HTML-Dialogelement verwenden. Sie müssten es in „Modaler“ Form verwenden. Hierfür ist JavaScript erforderlich.

Dialog.showModal();

Es gibt einige Überlegungen zur Barrierefreiheit. Wir empfehlen die Verwendung von a11y-dialog, z. B. für Safari-Nutzer unter Version 15.4.

Sie können auch eine der vielen Bibliotheken verwenden, die auf Pop-over-, Benachrichtigungs- oder Kurzinfos basieren. Viele von ihnen funktionieren in der Regel auf ähnliche Weise.

• Hängen Sie einen Container zum Anzeigen von Pop-overs an den Text an.
• Gestalte es so, dass es über allen anderen Elementen angezeigt wird.
• Erstellen Sie ein Element und hängen Sie es an den Container an, um ein Pop-over einzublenden.
• Sie können ihn ausblenden, indem Sie das Pop-over-Element aus dem DOM entfernen.

Dies erfordert eine zusätzliche Abhängigkeit und mehr Entscheidungen für Entwickler. Sie erfordert auch Recherchen, um ein Angebot zu finden, das alles enthält, was Sie brauchen. Die Popover API deckt viele Szenarien ab, einschließlich Kurzinfos. Das Ziel ist, all diese häufigen Szenarien abzudecken, damit Entwickler keine weiteren Entscheidungen treffen müssen, damit sie sich auf die Entwicklung ihrer Angebote konzentrieren können.

Dein 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 ist hier los?

• Sie müssen das Pop-over-Element nicht in einen Container einfügen, es ist standardmäßig ausgeblendet.
• Sie müssen dafür kein JavaScript schreiben. Dies wird vom Attribut popovertoggletarget verarbeitet.
• Wenn sie erscheint, wird sie auf der obersten Ebene hochgestuft. Das bedeutet, dass sie im Darstellungsbereich oberhalb des documents platziert wird. Sie müssen z-index nicht verwalten und müssen sich nicht darum kümmern, wo sich Ihr Pop-over im DOM befindet. Es könnte tief im DOM verschachtelt sein, wobei Ancestors abgeschnitten werden. Mit den Entwicklertools kannst du auch sehen, welche Elemente sich derzeit auf der obersten Ebene befinden. Weitere Informationen zum obersten Layer finden Sie in diesem Artikel.

• Standardmäßig wird die Option „Licht schließen“ eingeblendet. Damit meinen wir, dass Sie das Pop-over mit einem Schließsignal schließen können, z. B. wenn Sie außerhalb des Pop-over klicken, über die Tastatur zu einem anderen Element wechseln oder die Esc drücken. Öffne sie wieder und probier es aus!

Was bietet das Pop-over sonst noch? Gehen wir das Beispiel weiter. Betrachten Sie diese Demo mit einigen Inhalten auf der Seite.

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

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

Hinweis:Die unverankerte Aktionsschaltfläche kann auch ein Pop-over sein. Hier zeigen wir jedoch, dass der Zugriff auf den obersten Layer möglich ist. Weitere Informationen zu unverankerten Aktionsschaltflächen als Pop-overs folgen später.

Der Pop-over-Inhalt ist im DOM verschachtelt, aber wenn Sie das Pop-over öffnen, wird er über diesem festen Positionselement heraufgestuft. Sie müssen keine Stile festlegen.

Sie werden auch feststellen, dass das Pop-over jetzt ein Pseudoelement ::backdrop enthält. Alle Elemente auf der obersten Ebene erhalten ein anpassbares ::backdrop-Pseudoelement. In diesem Beispiel wird ::backdrop mit einer reduzierten Alpha-Hintergrundfarbe und einem Hintergrundfilter gestaltet, mit dem der zugrunde liegende Inhalt unkenntlich gemacht wird.

Hinweis:Standardmäßig ist für ::backdrop in einem Pop-over pointer-events: none festgelegt.

Stil für ein Pop-over erstellen

Wenden wir uns der Gestaltung des Pop-over zu. Standardmäßig verfügt ein Pop-over über eine feste Position und einen gewissen Abstand. Es hat auch display: none. Sie können dies überschreiben, um ein Pop-over einzublenden. Damit würde er jedoch nicht auf den obersten Layer hochgestuft werden.

[popover] { display: block; }

Unabhängig davon, wie Sie Ihr Popover bewerben möchten, müssen Sie ein Popover auf der obersten Ebene anordnen oder positionieren. Sie können die oberste Ebene nicht als Ziel festlegen und beispielsweise

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

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

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

Wenn Sie Inhalte in Ihrem Pop-over mithilfe eines CSS-Rasters oder einer Flexbox anordnen möchten, kann es sinnvoll sein, diese in ein Element einzubetten. Andernfalls müssen Sie eine separate Regel deklarieren, die display ändert, sobald sich das Pop-over im obersten Layer befindet. Wenn diese Option standardmäßig festgelegt ist, wird sie standardmäßig überschrieben und display: none überschrieben.

[popover]:open {
 display: flex;
}

Hinweis:Sie können das Pop-over-Stammelement auch als Container verwenden, der den Darstellungsbereich ausfüllt. Verwenden Sie dieses Element, um Inhalte innerhalb der obersten Ebene anzuordnen.

Wenn Sie diese Demo ausprobieren, werden Sie feststellen, dass das Pop-over jetzt ein- und ausgeblendet wird. Mit der Pseudoauswahl :open können Sie Popover-Fenster ein- und ausblenden. Die Pseudoauswahl :open stimmt mit Pop-overs überein, die angezeigt werden (und sich daher auf der obersten Ebene befinden).

Hinweis: Mit element.matches(':open') können Sie prüfen, ob ein Element mit JavaScript geöffnet ist. Dieser Wert kann sich im Laufe der Spezifikation ändern.

In diesem Beispiel wird die Umstellung mithilfe einer benutzerdefinierten Eigenschaft gefördert. Außerdem können Sie einen Übergang auf die ::backdrop im Pop-over 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 ist hier, Übergänge und Animationen unter einer Medienabfrage für Bewegung zu gruppieren. Das kann auch dabei helfen, dein Timing beizubehalten. Das liegt daran, dass Sie über eine benutzerdefinierte Eigenschaft keine Werte 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 mithilfe von popovertoggletarget gesehen, wie ein Pop-over eingeblendet wird. Um sie zu schließen, verwenden wir die Funktion „LED-Taste“. Sie können aber auch die Attribute popovershowtarget und popoverhidetarget verwenden. Wir fügen eine Schaltfläche zu einem Pop-over hinzu, das es ausgeblendet hat, und ändern die Ein/Aus-Schaltfläche so, dass popovershowtarget verwendet wird.

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

Hinweis:Möglicherweise stellen Sie auch fest, dass sich der Übergang in und aus geändert hat. Er wird nun durch separate Animationen unterstützt, die den Ein- und Ausgang auf der anderen Seite ermöglichen. Das bedeutet, dass Sie z. B. auf einer Achse etwas eingeben und auf einer anderen aussteigen können. Achte auf animation-fill-mode, wenn sich die Timings für ::backdrop und [popover] unterscheiden.

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

Einige dieser Szenarien erfordern andere Interaktionsmuster. Interaktionen wie „Hover“. Die Verwendung des Attributs popoverhovertarget wurde getestet, ist aber derzeit nicht implementiert.

Hinweis: Du kannst dich hier an der Diskussion über Hover-Interaktionen für Pop-ups beteiligen.

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

Die Idee ist, dass Sie den Mauszeiger auf ein Element bewegen, um das Ziel anzuzeigen. Dieses Verhalten könnte über CSS-Properties konfiguriert werden. Diese CSS-Eigenschaften definieren das Zeitfenster, in dem der Mauszeiger auf ein Element bzw. von einem Element bewegt wird, auf das ein Pop-over reagiert. Beim Standardverhalten, das getestet wurde, wurde nach einem expliziten 0.5s von :hover eine Pop-over-Show eingeblendet. Dann braucht es ein leichtes Schließen oder das Öffnen eines weiteren Pop-over, um sie zu schließen (mehr dazu gleich). Das liegt daran, dass die Dauer des Pop-over-Ausblendens auf Infinity festgelegt wurde.

Hinweis:Die Verwendung von popoverhovertarget ist nicht standardisiert oder derzeit implementiert.

In der Zwischenzeit kannst du diese Funktion mit JavaScript 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 die Aktion der Nutzenden beabsichtigt ist (z. B. wenn ein Nutzer seinen Mauszeiger über ein Ziel bewegt). Wir möchten das Pop-up nur anzeigen, wenn dies beabsichtigt ist.

In dieser Demo kannst du den Mauszeiger auf das Ziel bewegen und das Fenster auf 0.5s setzen.

---

Bevor wir auf einige häufige Anwendungsfälle und Beispiele eingehen, wollen wir uns zuerst einige Dinge ansehen.

---

Pop-over-Typen

Wir haben das Interaktionsverhalten ohne JavaScript besprochen. Aber was ist mit dem Pop-over-Verhalten insgesamt? Was ist, wenn Sie „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 mit unterschiedlichem Verhalten angeben.

[popover=auto]/[popover]:

• Nest-Unterstützung Das bedeutet aber nicht nur, dass sie im DOM verschachtelt sind. Die Definition eines Stammes-Popovers lautet:
  • abhängig von der DOM-Position (untergeordnet).
  • indem sie Attribute für untergeordnete Elemente wie popovertoggletarget und popovershowtarget auslösen.
  • sind durch das Attribut anchor verknüpft (CSS Anchoring API in Entwicklung).
• Licht ausschalten.
• Beim Öffnen werden andere Pop-overs geschlossen, die keine übergeordneten Pop-over sind. In der Demo unten kannst du dir ansehen, wie das Verschachteln mit Popovers von Vorfahren funktioniert. Sehen Sie sich an, wie sich Änderungen an einigen der popoverhidetarget/popovershowtarget-Instanzen auf popovertoggletarget auswirken.
• Wenn du eine Markierung im Stapel ausschließt, werden alle Elemente verworfen. Wird eine Werbebuchung im Stapel geschlossen, werden nur die darüberliegenden Elemente im Stapel geschlossen.

Achtung:Eine dritte Art von Pop-over mit popover=hint wurde bisher für Anwendungsfälle wie Kurzinfos implementiert. Wir haben das Problem am 13. Oktober 2022 behoben und auf eine zweite Version der Implementierung verschoben.

[popover=manual]:

• Es werden keine anderen Pop-over geschlossen.
• Keine Lampe ausschalten.
• Erfordert ein explizites Schließen über ein Trigger-Element oder JavaScript.

JavaScript API

Wenn Sie mehr Kontrolle über Ihre Pop-over benötigen, können Sie JavaScript verwenden. Sie erhalten sowohl die Methode showPopover als auch die Methode hidePopover. Es sind auch popovershow- und popoverhide-Ereignisse vorhanden, auf die gewartet werden soll:

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

popoverElement.hidePopover()

Warte, bis ein Pop-over erscheint:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Warte, bis ein Pop-over erscheint, und brich die Anzeige ab:

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

Blenden Sie ein, wenn ein Pop-over ausgeblendet wird:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Ein ausgeblendetes Pop-over kann nicht entfernt werden:

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

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

popoverElement.matches(':open')

Dies bietet zusätzliche Leistung für einige weniger gängige Szenarien. So können Sie beispielsweise nach einer bestimmten Zeit der Inaktivität ein Pop-over einblenden.

Diese Demo enthält Pop-over mit akustischen Pop-ups. Wir benötigen daher JavaScript, um die Audioinhalte abzuspielen. Durch Klicken blenden wir das Pop-over aus, geben die Audioinhalte wieder und zeigen es wieder an.

Barrierefreiheit

Barrierefreiheit spielt bei der Popover API eine zentrale Rolle. Bei Zuordnungen für Bedienungshilfen wird das Pop-over nach Bedarf mit seinem Triggerelement verknüpft. Das bedeutet, dass Sie keine aria-*-Attribute wie aria-haspopup deklarieren müssen, wenn Sie eines der auslösenden Attribute wie popovertoggletarget verwenden.

Für das Fokusmanagement können Sie das Attribut „autofokus“ verwenden, um den Fokus auf ein Element in einem Pop-over zu verschieben. Dies ist das Gleiche wie für ein Dialogfeld, der Unterschied besteht jedoch darin, dass der Fokus wieder fokussiert wird, weil das Licht ausgeschaltet wird. In den meisten Fällen wird durch das Schließen eines Pop-overs wieder das Element im Fokus, das zuvor im Fokus war. Der Fokus wird jedoch beim Schließen des Lichts auf ein angeklicktes Element verschoben, sofern es fokussiert werden kann. Weitere Informationen findest du in der Erläuterung im Abschnitt zum Fokusmanagement.

Öffnen Sie die Vollbildversion dieser Demo, um zu sehen, wie sie funktioniert.

In dieser Demo erhält das fokussierte Element einen grünen Umriss. Versuchen Sie, mit der Tastatur in der Benutzeroberfläche zu navigieren. Achten Sie darauf, wo der Fokus wieder angezeigt wird, wenn ein Pop-over geschlossen wird. Möglicherweise stellen Sie auch fest, dass das Pop-over geschlossen wurde, wenn Sie die Tabulatortaste angetippt haben. Das ist so gewollt. Auch wenn Popovers ein Fokusmanagement haben, schränken sie den Fokus nicht ein. Die Tastaturnavigation erkennt ein Signal, wenn der Fokus aus dem Pop-over bewegt wird.

Verankerung (in Entwicklung)

Bei Popovers besteht ein schwieriges Muster darin, das Element mit seinem Trigger zu verankern. Das ist beispielsweise der Fall, wenn festgelegt ist, dass eine Kurzinfo über dem Trigger angezeigt wird, aber im Dokument gescrollt wird. Diese Kurzinfo könnte vom Darstellungsbereich abgeschnitten werden. Dafür gibt es aktuell JavaScript-Angebote, beispielsweise Floating-UI. Damit wird die Kurzinfo neu positioniert und die gewünschte Positionsreihenfolge festgelegt.

Wir möchten, dass Sie dies mit Ihren Stilen definieren können. Zusammen mit der Popover API befindet sich derzeit eine Companion-API in der Entwicklung, um dieses Problem anzugehen. Mit der CSS Anchor Positioning API können Sie Elemente über Tethering mit anderen Elementen verknüpfen. 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 richtet sich nach der Position des Ankers im Darstellungsbereich.

Hier ist ein Snippet des CSS, das diese Demo ermöglicht. 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);
  }
}

Die Spezifikation finden Sie hier. Für diese API wird es auch einen Polyfill geben.

Beispiele

Jetzt wissen Sie, was Pop-over zu bieten hat und wie. Sehen wir uns einige Beispiele an.

Benachrichtigungen

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

• Verwendet [popover=manual].
• Bei Action Pop-over mit showPopover einblenden.
• Nach einem 2000ms-Zeitlimit mit hidePopover ausblenden.

Toast

In dieser Demo werden auf dem obersten Layer Benachrichtigungen im Toast-Stil angezeigt.

• Ein Pop-over vom Typ manual fungiert als Container.
• Neue Benachrichtigungen werden an das Pop-over angehängt und das Pop-over wird angezeigt.
• Sie werden per Klick mit der Web Animations API entfernt und aus dem DOM entfernt.
• Wenn keine Toasts vorhanden sind, wird das Pop-over ausgeblendet.

Verschachteltes Menü

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

• Verwenden Sie [popover=auto], da damit verschachtelte Popovers zulässig sind.
• Verwenden Sie autofocus im ersten Link jedes Drop-down-Menüs, um die Tastatur aufzurufen.
• Dies ist ein perfekter Kandidat für die CSS Anchoring API. In dieser Demo können Sie jedoch etwas JavaScript verwenden, um die Positionen mithilfe von benutzerdefinierten Eigenschaften zu 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));

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

Medien-Pop-over

Diese Demo zeigt, wie du Medien in einem Pop-up anzeigen kannst.

• [popover=auto] wird zum Ausschalten des Lichts verwendet.
• JavaScript wartet auf das play-Ereignis des Videos und startet das Video.
• Mit dem Pop-over-Ereignis popoverhide wird das Video pausiert.

Pop-overs im Wiki-Stil

In dieser Demo wird gezeigt, wie Sie Kurzinfos zu Inline-Inhalten erstellen können, die Medien enthalten.

• Verwendet [popover=auto]. Wenn du das eine zeigst, werden die anderen ausgeblendet, weil sie keine Vorfahren sind.
• Wird auf pointerenter mit JavaScript angezeigt.
• Ein weiterer perfekter Kandidat für die CSS Anchoring API.

Navigationsleiste

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

• [popover=auto] wird zum Ausschalten des Lichts verwendet.
• Verwendet autofocus, um den Fokus auf das erste Navigationselement zu verschieben.

Bilderrahmen verwalten

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

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

Benutzerdefiniertes Cursor-Pop-over

In dieser Demo wird gezeigt, wie Sie mit popover ein canvas-Element auf der obersten Ebene hochstufen und verwenden, um einen benutzerdefinierten Cursor anzuzeigen.

• Stufen Sie canvas mit showPopover und [popover=manual] zur obersten Ebene hoch.
• Wenn andere Pop-over geöffnet werden, blende das canvas-Pop-over aus und wieder ein, damit es oben zu sehen ist.

Aktionsblatt-Pop-over

Diese Demo zeigt, wie Sie ein Pop-over als Aktionsblatt verwenden können.

• Sie haben die Möglichkeit, display standardmäßig durch das Pop-over zu überschreiben.
• Das Aktionsblatt wird mit dem Pop-over-Trigger geöffnet.
• Wenn das Pop-over eingeblendet wird, wird es auf dem obersten Layer angezeigt und in Ansicht umgewandelt.
• Mit der LED-Funktion „Schließen“ kann sie zurückgegeben werden.

Über die Tastatur aktiviertes Pop-over

In dieser Demo wird gezeigt, wie Sie das Pop-over für die Benutzeroberfläche im Befehlspalettenstil verwenden können.

• Drücken Sie cmd + j, um das Pop-over einzublenden.
• input ist mit autofocus im Fokus.
• Das Kombinationsfeld ist ein zweites popover, das sich unter der Haupteingabe befindet.
• Bei Bedarf wird die Palette geschlossen, wenn das Drop-down-Menü nicht vorhanden ist.
• Ein weiterer Kandidat für die Anchoring API

Zeitgesteuertes Pop-over

Diese Demo zeigt nach vier Sekunden ein Pop-over bei Inaktivität. Ein UI-Muster, das häufig in Apps verwendet wird, die sichere Informationen zu einem Nutzer enthalten, um ein modales Abmeldefenster anzuzeigen.

• Verwenden Sie JavaScript, damit das Pop-over nach einer bestimmten Zeit der Inaktivität angezeigt wird.
• Setze den Timer bei der Pop-over-Show zurück.

Bildschirmschoner

Ähnlich wie in der vorherigen Demo könnten Sie Ihre Website noch etwas witziger machen und einen Bildschirmschoner hinzufügen.

• Verwenden Sie JavaScript, damit das Pop-over nach einer bestimmten Zeit der Inaktivität angezeigt wird.
• Zum Ausblenden der Zeit und zum Zurücksetzen des Timers die LED ausschalten.

Caret-Folgen

Diese Demo zeigt, wie Sie in einem Pop-over einem Eingabe-Caret folgen können.

• Pop-over basierend auf Auswahl, Schlüsselereignis oder eingegebenen Sonderzeichen anzeigen.
• Verwenden Sie JavaScript, um die Pop-over-Position mit bereichsspezifischen benutzerdefinierten Eigenschaften zu aktualisieren.
• Bei diesem Muster sollten die gezeigten Inhalte und die Barrierefreiheit sorgfältig überdacht werden.
• Sie wird häufig bei der Textbearbeitung der Benutzeroberfläche und in Apps verwendet, in denen man Tags hinzufügen kann.

Unverankertes Aktionsschaltflächenmenü

In dieser Demo wird gezeigt, wie Sie mit einem Pop-over ein unverankertes Aktionsschaltflächenmenü ohne JavaScript implementieren können.

• Sie können mit der Methode showPopover ein Pop-over vom Typ manual hochstufen. Das ist die Haupttaste.
• Das Menü ist ein weiteres Pop-over, das als Ziel der Hauptschaltfläche dient.
• Menü wird mit popovertoggletarget geöffnet.
• Mit autofocus kannst du den ersten Menüpunkt auf die Sendung setzen.
• Mit der LED-Funktion wird das Menü geschlossen.
• Für das Symbol wird :has() verwendet. Weitere Informationen zu :has() findest du in diesem Artikel.

Fertig!

Das ist also eine Einführung in Pop-over, die im Rahmen der Open UI-Initiative geplant wird. Sorgfältig eingesetzt wird es eine fantastische Ergänzung der Webplattform.

Weitere Informationen finden Sie auch unter Open UI (UI öffnen). Die erklärende Pop-over-Erklärung wird laufend aktualisiert, während die API weiterentwickelt wird. Hier ist die Sammlung aller Demos.

Danke fürs „Kommen“!

---

Foto von Madison Oren auf Unsplash