HTMLElement: togglePopover() Methode

Ein Boolean (force) oder ein Optionsobjekt:

force Optional

Ein Boolean, der togglePopover() dazu bringt, sich wie showPopover() oder hidePopover() zu verhalten, jedoch ohne eine Ausnahme zu werfen, wenn das Popover bereits im Zielzustand ist.

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

options Optional

Ein Objekt, das die folgenden Eigenschaften enthalten kann:

force Optional

Ein Boolean; siehe die force Beschreibung oben.

source Optional

Ein HTMLElement Verweis; definiert programmatisch den Aufrufer des mit der Umschaltaktion assoziierten Popovers, d.h. sein Steuerelement. Die Beziehung zwischen einem Popover und seinem Aufrufer mithilfe der source-Option herzustellen, hat zwei nützliche Effekte:

• Der Browser platziert das Popover in einer logischen Reihenfolge in der Tastaturfokusnavigation, wenn es angezeigt wird. Dies macht das Popover für Tastaturbenutzer zugänglicher (siehe auch Popover-Zugänglichkeitseigenschaften).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerelementen zu positionieren, indem CSS-Ankerpositionierung verwendet wird. Siehe Popover-Ankerpositionierung für weitere Details.

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

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

Siehe die Popover API Beispiele Startseite, um auf die vollständige Sammlung der MDN Popover-Beispiele zuzugreifen.

Dies ist eine leicht modifizierte Version des Toggle Help UI Popover Beispiels. 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 aufzurufen ist, da Popups standardmäßig versteckt sind.

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

Wir definieren dann ein <div> Element, das das Popup ist. Der tatsächliche Inhalt spielt keine Rolle, aber beachten Sie, dass wir das popover-Attribut benötigen, um das <div> in ein Popover zu verwandeln, damit es standardmäßig versteckt ist (oder wir könnten dieses Element im JavaScript festlegen).

<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 überprüfen wir, ob Popovers unterstützt werden, und wenn nicht, verstecken wir das Popover div, damit es nicht inline angezeigt wird.

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

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

Wenn Popovers unterstützt werden, fügen wir einen Listener für das Drücken der h-Taste hinzu und verwenden diesen, um das Öffnen des Popups auszulösen. 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 (HTMLElement.prototype.hasOwnProperty("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 im untenstehenden Live-Beispiel testen.

• popover globales HTML-Attribut
• Popover API