HTMLElement: togglePopover() Methode

force

Ein boolean, der togglePopover() dazu veranlasst, sich wie showPopover() oder hidePopover() zu verhalten, außer dass es keine Ausnahme auslöst, wenn das Popover bereits im Zielzustand ist.

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

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

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

Sehen Sie auf der Popover API Examples Landing Page die vollständige Sammlung von MDN-Popover-Beispielen.

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 dargestellt. Dieses erste Element definiert Anweisungen, wie das Popup aufgerufen werden kann, das wir benötigen, 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 eigentliche Inhalt ist nicht wichtig, aber beachten Sie, 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 im 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 dargestellt. 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 hinzu, der das Drücken der h-Taste erkennt, und nutzen diesen, um das Popup zu öffnen. Wir protokollieren auch, ob das Popup nach dem Aufruf offen oder geschlossen war, jedoch nur, wenn 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 mit dem Live-Beispiel unten ausprobieren.

• popover globales HTML-Attribut
• Popover API