Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/API/HTMLButtonElement/popoverTargetElement below:

HTMLButtonElement: popoverTargetElement-Eigenschaft - Web-APIs | MDN

Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API, indem ein <div>-Element als Popover festgelegt wird und dann als popoverTargetElement eines <button> festgesetzt wird. Das popover-Attribut ist auf "manual" gesetzt, sodass das Popover mit einem Button geschlossen werden muss und nicht durch das Auswählen außerhalb des Popover-Bereichs "light dismissed" werden kann.

Zuerst definieren wir ein HTML-<button>-Element, das wir verwenden werden, um das Popover anzuzeigen und zu verstecken, und ein <div>, das das Popover sein wird. In diesem Fall setzen wir nicht das HTML-Attribut popovertargetaction auf dem <button> oder das popover-Attribut auf dem <div>, da wir dies programmatisch tun werden.

<button id="toggleBtn">Toggle popover</button>
<div id="mypopover">This is popover content!</div>

Der JavaScript-Code erhält zunächst eine Referenz auf die <div>- und <button>-Elemente. Dann definiert er eine Funktion, um die Unterstützung für Popover zu überprüfen.

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

// Check for popover API support.
function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

Wenn die Popover-API unterstützt wird, setzt der Code das popover-Attribut des <div>-Elements auf "auto" und macht es zum Popover-Ziel des Umschalt-Buttons. Wir setzen dann die popoverTargetAction des <button> auf "toggle". Falls die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des <div>-Elements, um dies zu melden, und verstecken den Umschalt-Button.

if (supportsPopover()) {
  // Set the <div> element to be an auto popover
  popover.popover = "auto";

  // Set the button popover target to be the popover
  toggleBtn.popoverTargetElement = popover;

  // Set that the button toggles popover visibility
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "Popover API not supported.";
  toggleBtn.hidden = true;
}

Hinweis: Ein Popover-Element ist standardmäßig verborgen, aber wenn die API nicht unterstützt wird, wird Ihr Element "wie üblich" angezeigt.

Sie können das Beispiel unten ausprobieren. Zeigen und verbergen Sie das Popover, indem Sie den Button umschalten. Das "auto" Popover kann auch durch Auswahl außerhalb der Grenzen des Popover-Textes geschlossen werden.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4