Popover mit JavaScript steuern

30min

mittel

• Popover

Einerseits ist es ein Widerspruch: Ein Popover ist gerade deshalb interessant, weil es kein JavaScript benötigt. Die eingebaute Browser-Logik übernimmt Öffnen, Schließen und sogar Dinge wie das Schließen per ESC-Taste ganz von selbst.

Manchmal gibt es aber doch Situationen, in denen man mehr Kontrolle braucht. Vielleicht soll sich das Popover automatisch nach ein paar Sekunden schließen, nur unter bestimmten Bedingungen erscheinen oder mit anderen UI-Elementen synchronisiert werden — etwa einem animierten Hamburger-Menü.

In solchen Fällen kommt JavaScript ins Spiel. Die Popover-API stellt dafür einfache Methoden bereit, mit denen sich Popover gezielt öffnen, schließen oder umschalten lassen. In diesem Tutorial schauen wir uns an, wie das funktioniert und wann sich der Einsatz von JavaScript wirklich lohnt.

Historische Altlasten

In JavaScript existieren die window-Methoden alert, confirm und prompt, um mit Hilfe von Dialogfenstern mit dem Benutzer zu interagieren. Diese Methoden haben durchaus ihre historische Berechtigung, bringen jedoch einen entscheidenden Nachteil mit sich: Sie blockieren die Ausführung von JavaScript und versetzen den Browser in einen modalen Zustand. Während das Dialogfenster geöffnet ist, kann die eigentliche Seite nicht weiter genutzt werden.

Zwar sind diese klassischen Dialoge einfach zu verwenden, wirken heute jedoch oft unflexibel und gestalterisch eingeschränkt. Ein Popover kann sie in vielen Fällen besser ersetzen.

Das Popover API

Das Popover API ist eine native Browser-Funktionalität, die es erlaubt, Elemente als überlagernde Ebene anzuzeigen — ohne externe Bibliotheken oder komplexes z-index-Management. Ein Element wird zum Popover, indem es das popover-Attribut erhält. Geöffnet und geschlossen wird es über das popovertarget-Attribut an einem Button – oder auch per JavaScript mit showPopover() und hidePopover().

Das Besondere: Das API bringt ein automatisches Backdrop mit, verwaltet den Fokus und schließt das Popover bei einem Klick außerhalb — alles ohne eigenen Code. Solche nichtmodalen Dialoge sind oft besser geeignet, weil sie den Nutzer nicht aus dem aktuellen Kontext herausreißen und gleichzeitig Interaktionen mit der restlichen Seite weiterhin ermöglichen.

Info-Hinweise anstelle von alert()

Klassisch ist unser alert():

alert("Gespeichert!");

Eine graue Box springt als modaler Dialog auf, die Webseite wird blockiert. Der Nutzer kann erst fortfahren, wenn er den Dialog wegeklickt hat.

Mit Popover können wir ein kleines Hinweisfeld neben den Button setzen:

alert() durch ein natives Popover ersetzen! ansehen …

document.addEventListener('DOMContentLoaded', function () {
 
	document.querySelector('#save').addEventListener('click', async event => {
		// Formular speichern
		// await saveData();
		document.querySelector('#popover-alert').showPopover();
	});

	document.querySelector('#close').addEventListener('click', event => {
		document.querySelector('#popover-alert').hidePopover();
	});

});

Wenn du auf den Button mit #save klickst, wird das Formular gespeichert. Erst danach wird showPopover() aufgerufen und das Popover geöffnet.

Wichtig: Das showPopover() ersetzt den Klick nicht, sondern passiert zusätzlich nach dem Klick. Der Button ist mit dem Popover nicht über ein popovertarget-Attribut verbunden.

Wenn du auf #close klickst, wird hidePopover() aufgerufen und das Popover wieder geschlossen.

Vorteile dieser Vorgehensweise:

• Das Popover kann mit CSS gestlatet werden und
• blockiert nicht den ganzen Bildschirm
• kann automatisch mit light dismiss verschwinden

Ein solches Popover ist geeignet für kleinere Statusmeldungen und Fehlerhinweise

Bestätigungen

Die Methode Window.confirm() blendet ein Dialogfenster mit zwei Buttons für "OK" und "Abbrechen" ein. Sinnvoll, um vom Anwender eine Entscheidung zu erzwingen, die im weiteren Programmablauf verarbeitet wird.

confirm("Wirklich löschen?");

Auch hier kann man ein Popover einsetzen:

confirm() durch ein natives Popover ersetzen! ansehen …

    let currentItem = '';

    function setResult(text) {
      document.getElementById('result-box').textContent = text;
    }

    function openPopover(name) {
      currentItem = name;
      document.getElementById('popover-title').textContent = '\u201E' + name + '\u201C löschen?';
      document.getElementById('popover-body').textContent = '\u201E' + name + '\u201C wird dauerhaft entfernt. Diese Aktion kann nicht rückgängig gemacht werden.';
      document.getElementById('popover-confirm').showPopover();
    }

    document.getElementById('popover-confirm-btn').addEventListener('click', function () {
      document.getElementById('popover-confirm').hidePopover();
      setResult('Gelöscht: ' + currentItem);
    });

Die Funktion openPopover() sammelt den Namen des zu löschenden Dokuments und fügt diesen in das Popover ein. Dies wird mit showPopover() geöffnet.

Dies bietet einige Vorteile:

• Der Kontext bleibt sichtbar
• Das Popover wirkt weniger „hart“ als ein Browser-Popup
• Es ist mit CSS stylebar!

Kleine Eingaben

Die Methode Window.prompt() zeigt ein Dialogfenster mit einem Eingabefeld, einem OK-Button und einem Abbrechen-Button an. So lassen sich Anwendereingaben im Script weiterverarbeiten.

  prompt("Name eingeben:");

Mit Popover haben wir ein kleines Formular in unserem UI:

prompt() durch ein natives Popover ersetzen! ansehen …

Fazit

Popover sind ideal für kontextbezogene Interaktionen und eine bessere User Experience, da sie in das Look & Feel der Webseite passen.

Die Methoden confirm() und prompt() lassen sich fast immer sinnvoll ersetzen.

JS-Dialoge sind noch sinnvoll, wenn …

• du wirklich blockieren musst (z. B. kritische Sicherheit)
• du einen extrem schnellen Prototyp brauchst
• kein UI vorhanden ist

Siehe auch

• 

  modale Dialogfenster
  • dialog-Element
  • modal vs nichtmodal
  •  :backdrop

  Das UI-Element für Web-Apps

   
• Bilder präsentieren -
  Lightbox mit Popover
  
   

Weblinks

• github.com: The Incredible Accessible Modal Window
• github.com: A11y Dialog