Für die meisten User dürften sie vor allem in die Kategorie “Nervtöter” fallen - Popups, Popover, Modale oder wie man sie genau nennt. Zu den, gelinde gesagt, weniger beliebten Gestaltungsmustern in den letzten Jahren gehören großflächige Popovers, die den größten Teil des Inhalts einer Website verdecken und beispielsweise den hauseigenen Newsletter anpreisen. Wodurch sich die verschiedenen Typen genau unterscheiden, ist nicht ganz klar definiert. Eine kurze Internet-Suche findet schnell diverse unterschiedliche Definitionen, was ein “Popup” ist im Gegensatz zu einem “Popover” oder einem “Modal” oder einem “Dialog” oder …
Klar dürfte vor allem sein, was ein “Popunder” ist. Darunter versteht man meistens einen zusätzlichen Layer oder ein zusätzliches Fenster, dass - meist unbemerkt - unter dem eigentlichen Inhalt angezeigt wird. Damit kann ein böswilliger Betreiber beispielsweise Werbebanner technisch gesehen “anzeigen” und dafür Geld kassieren, ohne dass sie je ein Besucher der Website zu Gesicht bekommt. Aber davon soll hier nicht die Rede sein, sondern von - um sich auf einen Begriff festzulegen - von Popovern.
Denn technisch sind die mit der sogenannten Popover-API jetzt besonders einfach zu bauen. Diese API sollte bereits 2024 in den meisten Webbrowsern verfügbar sein, Probleme mit dem sogenannten “light dismiss” haben jedoch für eine Verzögerung gesorgt. Seit Anfang 2025 ist die Popover-API nun aber nahezu überall verfügbar, laut caniuse.com bei rund 90% aller Benutzer weltweit.
In der einfachsten Form braucht man nur zwei zusätzliche HTML-Attribute: Das HTML-Element, das als Popover angezeigt werden soll, bekommt das Attribut popover. Und der Button, der das Popover auslösen soll, bekommt das Attribut popovertarget, dem die ID des Popover-Elements übergeben wird:
<button popovertarget="the-popover">Popover anzeigen</button>
<div id="the-popover" popover>
<p>Ich bin ein Popover!</p>
</div>
Das genügt schon. Ruft man jetzt die Website auf, wird das div mit der ID the-popover zunächst nicht angezeigt. Ein Klick auf den Button blendet das Popover zentriert ein. Um das Popover wieder loszuwerden, kann man den Button erneut klicken, die Escape-Taste drücken oder mit der Maus irgendwo auf der Website außerhalb des Popovers klicken. Die letztgenannte Methode ist übrigens das bereits erwähnte “light dismiss”.
In dieser sehr einfachen Form kann der Auslöser nur ein button-Element oder ein <input type="button"> sein. Für komplexere Szenarien stehen unter anderem JavaScript-Funktionen wie showPopover() oder hidePopover() zur Verfügung. Die mdn web docs bieten weiterführende Informationen.
Für die mit dieser Methode erstellten Popovers gilt dasselbe wie für alle anderen: Um Spider-Man zu paraphrasieren, mit einem großen Popup kommt große Verantwortung. Denn wie bereits zu Beginn dieses Blogbeitrags angesprochen, ist es ziemlich leicht, die User seiner Website mit überbordenden Popovers nachhaltig zu vergrätzen.
