HTMLElement: hidePopover()-Methode

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2024 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die hidePopover()-Methode der HTMLElement-Schnittstelle verbirgt ein Popover-Element (d.h. eines mit einem gültigen popover-Attribut), indem es vom Top-Layer entfernt und mit display: none gestylt wird.

Wenn hidePopover() auf einem sichtbaren Element mit dem popover-Attribut aufgerufen wird, wird ein beforetoggle-Event ausgelöst, gefolgt vom Verbergen des Popovers, woraufhin das toggle-Event ausgelöst wird.

Syntax

hidePopover()

InvalidStateError DOMException: Wird ausgelöst, wenn diese Methode aufgerufen wird, während ein anderes Popover bereits im Prozess des Zeigens oder Verbergens ist (z. B. innerhalb eines beforetoggle-Event-Listeners).

Beispiele

Das folgende Beispiel bietet eine Funktionalität, um ein Popover durch Drücken einer bestimmten Taste auf der Tastatur zu verbergen.

HTML

html

<button popovertarget="mypopover">Toggle popover's display</button>
<div id="mypopover" popover="manual">
  You can press <kbd>h</kbd> on your keyboard to close the popover.
</div>

JavaScript

const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.hidePopover();
  }
});