Die Popover-API bietet Entwicklern einen standardisierten, konsistenten und flexiblen Mechanismus, um Popover-Inhalte über anderen Seiteninhalten anzuzeigen. Popover-Inhalte können entweder durch HTML-Attribute oder über JavaScript gesteuert werden.
Konzepte und NutzungEin sehr häufiges Muster im Web ist es, Inhalte über andere Inhalte zu zeigen, um die Aufmerksamkeit des Benutzers auf spezifische wichtige Informationen oder Aktionen zu lenken, die durchgeführt werden müssen. Diese Inhalte können verschiedene Namen haben â Overlays, Popups, Popovers, Dialoge usw. In der Dokumentation werden wir sie als Popovers bezeichnen. Im Allgemeinen können diese sein:
Popovers, die mithilfe der Popover-API erstellt werden, sind immer nicht modal. Wenn Sie ein modales Popover erstellen möchten, ist ein <dialog>-Element der richtige Weg. Es gibt erhebliche Ãberschneidungen zwischen den beiden â Sie könnten beispielsweise ein persistentes Popover erstellen möchten, es aber über HTML steuern. Sie können ein <dialog>-Element in ein Popover verwandeln (<dialog popover> ist vollkommen gültig), wenn Sie die Steuerung eines Popovers mit Dialog-Semantik kombinieren möchten.
Typische Anwendungsfälle für die Popover-API umfassen benutzerinteraktive Elemente wie Aktionsmenüs, benutzerdefinierte "Toast"-Benachrichtigungen, Vorschläge für Formularelemente, Inhaltspicker oder lehrende Benutzeroberflächen.
Sie können Popovers auf zwei verschiedene Arten erstellen:
Ãber eine Reihe neuer HTML-Attribute. Ein einfaches Popover mit einem Umschalt-Button kann mit dem folgenden Code erstellt werden:
<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>
Ãber eine JavaScript-API. Zum Beispiel kann HTMLElement.togglePopover() verwendet werden, um ein Popover zwischen sichtbar und verborgen umzuschalten.
Es gibt auch neue Ereignisse, um auf das Umschalten eines Popovers zu reagieren, und CSS-Features, um das Styling von Popovers zu erleichtern. Alle neuen Funktionen sind unten aufgeführt.
Siehe Verwendung der Popover-API für einen detaillierten Leitfaden zur Nutzung dieser API.
HTML-Attributepopover
Ein globales Attribut, das ein Element in ein Popover-Element verwandelt; nimmt einen Popover-Zustand ("auto", "hint" oder "manual") als Wert an.
popovertarget
Verwandelt ein <button>- oder <input>-Element in einen Popover-Steuerungsbutton; nimmt die ID des zu steuernden Popover-Elements als Wert an.
popovertargetaction
Gibt die Aktion an, die ("hide", "show", oder "toggle") auf dem durch einen Steuerungs-<button> oder <input> gesteuerten Popover-Element ausgeführt werden soll.
::backdrop
Das ::backdrop-Pseudoelement ist ein vollbildiges Element, das direkt hinter Popover-Elementen platziert wird und es ermöglicht, Effekte auf die Seiteninhalte hinter den Popover(s) hinzuzufügen, wenn gewünscht (zum Beispiel, um sie auszufokussieren).
:popover-open
Die :popover-open-Pseudoklasse trifft auf ein Popover-Element nur zu, wenn es im Anzeigezustand ist â sie kann verwendet werden, um Popover-Elemente zu stylen, wenn sie angezeigt werden.
ToggleEvent
Repräsentiert ein Ereignis, das den Benutzer darüber informiert, wenn sich der Zustand eines Popover-Elements zwischen sichtbar und verborgen umschaltet. Es ist das Ereignisobjekt für die Ereignisse beforetoggle und toggle, die auf Popovers ausgelöst werden, wenn sich deren Zustand ändert.
HTMLElement.popover
Ruft den Popover-Zustand eines Elements ab und setzt ihn über JavaScript ("auto", "hint" oder "manual"), und kann für die Funktionsprüfung verwendet werden. Reflektiert den Wert des globalen HTML-Attributs popover.
HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement
Ruft das vom Steuerungsbutton gesteuerte Popover-Element ab und setzt es. Das JavaScript-Ãquivalent des HTML-Attributs popovertarget.
HTMLButtonElement.popoverTargetAction und HTMLInputElement.popoverTargetAction
Ruft die auszuführende Aktion ("hide", "show" oder "toggle") auf dem vom Steuerungsbutton gesteuerten Popover-Element ab und setzt sie. Reflektiert den Wert des HTML-Attributs popovertargetaction.
HTMLElement.hidePopover()
Verbirgt ein Popover-Element, indem es aus der obersten Ebene entfernt und mit display: none gestylt wird.
HTMLElement.showPopover()
Zeigt ein Popover-Element, indem es zur obersten Ebene hinzugefügt wird.
HTMLElement.togglePopover()
Schaltet ein Popover-Element zwischen sichtbarem und verborgenen Zustand um.
HTMLElement.beforetoggle Ereignis
Wird kurz bevor der Zustand eines Popover-Elements zwischen sichtbar und verborgen wechselt oder umgekehrt ausgelöst. Kann verwendet werden, um zu verhindern, dass ein Popover geöffnet wird, oder um andere Elemente zu aktualisieren, die durch den Popover-Zustand ausgelöst werden müssen.
HTMLElement.toggle Ereignis
Wird unmittelbar nachdem sich der Zustand eines Popover-Elements zwischen sichtbar und verborgen wechselt oder umgekehrt ausgelöst.
Besuchen Sie unsere Popover-API-Beispiele-Seite, um auf die vollständige Sammlung von MDN-Popover-Beispielen zuzugreifen.
Spezifikationen Browser-Kompatibilität api.HTMLElement.popover api.HTMLElement.beforetoggle_event.popover_elements api.HTMLElement.toggle_event.popover_elements Siehe auchpopover globales HTML-Attributpopovertarget HTML-Attributpopovertargetaction HTML-Attribut::backdrop CSS-Pseudoelement:popover-open CSS-PseudoklasseRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4