HTMLElement: togglePopover() Methode

Syntax

togglePopover()
togglePopover(force)
togglePopover(options)

Parameter

Ein Boolean (force) oder ein Optionsobjekt:

force Optional

Ein Boolean, der togglePopover() so wirken lässt wie showPopover() oder hidePopover(), außer dass keine Ausnahme ausgelöst wird, wenn das Popover sich bereits im Zielzustand befindet.

• Wenn auf true gesetzt, wird das Popover angezeigt, wenn es ursprünglich versteckt war. Wenn es ursprünglich angezeigt war, passiert nichts.
• Wenn auf false gesetzt, wird das Popover versteckt, wenn es ursprünglich angezeigt war. Wenn es ursprünglich versteckt war, passiert nichts.

options Optional

Ein Objekt, das die folgenden Eigenschaften enthalten kann:

force Optional

Ein Boolean; siehe die Beschreibung zu force oben.

source Optional

Eine HTMLElement Referenz; definiert programmatisch den Auslöser des mit der Umschaltaktion verbundenen Popovers, also dessen Steuerelement. Eine Beziehung zwischen einem Popover und seinem Auslöser mittels der source-Option herzustellen, hat zwei nützliche Effekte:

• Der Browser platziert das Popover an einer logischen Position in der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Tastaturbenutzer zugänglicher (siehe auch Popover-Zugänglichkeitsfunktionen).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr praktisch macht, Popovers relativ zu ihren Steuerungen mittels CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für mehr Details.

Rückgabewert

true, wenn das Popup nach dem Aufruf geöffnet ist, und false andernfalls.

Sollte undefined (undefined) in älteren Browserversionen zurückgegeben werden, siehe Browser-Kompatibilität.

Beispiele

Sehen Sie die Popover API examples landing page, um auf die vollständige Sammlung von MDN Popover-Beispielen zuzugreifen.

Einfaches automatisches Pop-up

Dies ist eine leicht modifizierte Version des Toggle Help UI Popover Example. Das Beispiel schaltet ein Popover ein und aus, indem eine bestimmte Taste auf der Tastatur gedrückt wird (wenn das Beispiel-Fenster den Fokus hat).

Der HTML-Code für das Beispiel wird unten gezeigt. Dieses erste Element definiert Anweisungen, wie das Popup angezeigt wird, was wir benötigen, weil Popups standardmäßig versteckt sind.

<p id="instructions">
  Press "h" to toggle a help screen (select example window first).
</p>

Dann definieren wir ein <div>-Element, welches das Popup ist. Der eigentliche Inhalt ist nicht wichtig, aber es ist zu beachten, dass wir das popover Attribut benötigen, um das <div> in ein Popover zu verwandeln, sodass es standardmäßig versteckt ist (oder wir könnten dieses Element in JavaScript setzen).

<div id="mypopover" popover>
  <h2>Help!</h2>

  <p>You can use the following commands to control the app</p>

  <ul>
    <li>Press <ins>C</ins> to order cheese</li>
    <li>Press <ins>T</ins> to order tofu</li>
    <li>Press <ins>B</ins> to order bacon</li>
  </ul>
</div>

Der JavaScript-Code für das Beispiel wird unten gezeigt. Zuerst prüfen wir, ob Popovers unterstützt werden, und falls nicht, verbergen wir das Popover-div, sodass es nicht inline angezeigt wird.

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

if (!Object.hasOwn(HTMLElement.prototype, "popover")) {
  popover.innerText = "";
  instructions.innerText = "Popovers not supported";
}

Wenn Popovers unterstützt werden, fügen wir einen Listener hinzu, der das Drücken der 'h'-Taste überwacht und verwenden diesen, um das Öffnen des Popups zu triggern. Wir protokollieren auch, ob das Popup nach dem Aufruf geöffnet oder geschlossen war, aber nur, wenn ein true oder false zurückgegeben wurde.

if (Object.hasOwn(HTMLElement.prototype, "popover")) {
  document.addEventListener("keydown", (event) => {
    if (event.key === "h") {
      const popupOpened = popover.togglePopover();

      // Check if popover is opened or closed on supporting browsers
      if (popupOpened !== undefined) {
        instructions.innerText +=
          popupOpened === true ? `\nOpened` : `\nClosed`;
      }
    }
  });
}

Sie können dies mit dem Live-Beispiel unten ausprobieren.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• popover HTML globales Attribut
• Popover API