Die neue Popover-API: Mühelose Popovers ohne JavaScript

Die Popover-API vereinfacht die Popover-Erstellung und macht JavaScript-Bibliotheken oder manuelle Codierung überflüssig. Es wird von allen gängigen Browsern unterstützt und ist bemerkenswert einfach zu implementieren.

Die Popover-API verstehen

Dieser neue Standard optimiert den Prozess der Anzeige von Popovers und berücksichtigt automatisch Überlegungen zum Öffnen, Schließen und zur Barrierefreiheit. Entwickler müssen diese Zustände nicht mehr unabhängig verwalten.

Ein Popover erstellen

Grundlegende Implementierung

So erstellen Sie ein einfaches Popover:

1. Erstellen Sie eine Schaltfläche in Ihrem HTML, um das Popover auszulösen.
2. Verwenden Sie das Attribut popover-target auf der Schaltfläche und verknüpfen Sie es über eine gemeinsame ID mit einem Element (z. B. popover).
3. Wenden Sie das Attribut popover auf das HTML-Element an, das Sie als Popover verwenden möchten, und verwenden Sie dabei dieselbe ID.

Das ist alles was es braucht! Durch Klicken auf die Schaltfläche wird das Popover geöffnet und automatisch geschlossen, wenn Sie außerhalb klicken (leichtes Schließen). Diese Umschaltfunktion ist das Standardverhalten.

Hinzufügen einer Schließen-Schaltfläche

Sie können eine Schließen-Schaltfläche innerhalb des Popovers hinzufügen. Geben Sie dieser Schaltfläche das entsprechende popover-target-Attribut und definieren Sie explizit eine hide-Aktion. Ein wenig CSS wird das Erscheinungsbild verbessern.

Popover-Modi

Popovers sind standardmäßig im „Auto“-Modus:

1. Durch das Öffnen eines Popovers werden alle anderen geöffneten Popovers geschlossen.
2. Light Dismiss ist aktiviert.

Das Umschalten in den „manuellen“ Modus verhindert das automatische Schließen anderer Popovers und deaktiviert die Lichtausblendung. Sie müssen das Öffnen und Schließen des Popovers explizit verwalten.

Styling-Popovers

Verwendung des Hintergrundelements

Das backdrop-Element ist besonders nützlich; Es überlagert den Rest der Seite, wenn das Popover geöffnet ist.

<code class="language-css">[popover] {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    max-width: 300px;
}

/* ... other CSS ... */</code>

Dies ermöglicht eine einfache Hintergrundgestaltung, um die Aufmerksamkeit auf das Popover zu lenken.

Popover vs. Modal

Es ist wichtig zu verstehen, dass Popovers nicht modal sind:

1. Popovers deaktivieren nicht die Interaktion mit dem Rest der Seite.
2. Sie können weiterhin auf andere Elemente klicken, während ein Popover geöffnet ist.

Für ein Modal, das vor dem Fortfahren eine Benutzerinteraktion erfordert, verwenden Sie stattdessen dialog.showModal(). Dies erfordert etwas JavaScript, bietet aber echte modale Funktionalität.

Verbesserung des Popover-Stylings

Verwendung des Dialogelements

Das popover-Attribut selbst ist nicht semantisch, sodass Sie ein HTML-<dialog>-Element für Ihr Popover verwenden können.

Weitere Inhalte hinzufügen und CSS anwenden

Durch das Hinzufügen weiterer Inhalte (Schaltflächen usw.) und der Gestaltung mit CSS (Schriftfamilien, Abstände, Farben usw.) wird das Erscheinungsbild des Popovers weiter verbessert. Das Beispiel zeigt, wie man Primärtasten für ein eleganteres Aussehen gestaltet.

JavaScript mit Popover verwenden

Während die API die Popover-Erstellung ohne JavaScript vereinfacht, können Sie JavaScript dennoch für eine erweiterte Steuerung verwenden (z. B. showPopover).

Fazit

Die Popover-API bietet einen optimierten Ansatz zum Erstellen eleganter und zugänglicher Popovers mit minimalem Code. Ihr Feedback ist willkommen! Erwägen Sie, weitere Inhalte wie diesen zu liken oder ihnen zu folgen.

Folgen Sie mir auf: LinkedIn | Mittel | Bluesky

Das obige ist der detaillierte Inhalt vonPopover-API: Erstellen Sie native Pop-ups mit HTML – kein JavaScript erforderlich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!