HTMLElement : méthode togglePopover()
La méthode togglePopover()
de l'interface HTMLElement
permet d'alterner les états d'un élément popover (c'est-à-dire un élément qui a un attribut popover
valide) entre l'état masqué et l'état affiché.
Lorsque togglePopover()
est appelée sur un élément avec l'attribut popover
:
- Un évènement
beforetoggle
est déclenché. - Le popover alterne entre l'état masqué et affiché :
- S'il était initialement affiché, il est masqué.
- S'il était initialement masqué, il est affiché.
- Un évènement
toggle
est déclenché.
Syntaxe
togglePopover(force)
Paramètres
force
-
Un booléen, qui fait que
togglePopover()
se comporte commeshowPopover()
ouhidePopover()
, à l'exception qu'elle ne lance pas d'exception si le popover est déjà dans l'état cible.- S'il est défini sur
true
, le popover est affiché s'il était initialement masqué. S'il était initialement affiché, rien ne se passe. - S'il est défini sur
false
, le popover est masqué s'il était initialement affiché. S'il était initialement masqué, rien ne se passe.
- S'il est défini sur
Valeur de retour
true
si le popup est ouvert après l'appel, et false
sinon.
Note : undefined
peut être retournée dans d'anciennes versions de navigateurs (voir compatibilité des navigateurs).
Exemples
Note : Voir la page d'exemples de l'API Popover pour accéder à la collection complète des exemples de MDN relatifs aux popovers.
L'exemple qui suit est une version légèrement modifiée de l'exemple d'interface d'aide. L'exemple affiche/masque un popover en appuyant sur une touche particulière du clavier (lorsque la fenêtre de l'exemple a le focus).
HTML
Le HTML de l'exemple est affiché ci-après. Le premier élément fournit les instructions sur la façon d'invoquer le popup, ce dont nous avons besoin, car les popups sont masqués par défaut.
<p id="instructions">
Appuyez sur <kbd>h</kbd> pour afficher/masquer une fenêtre d'aide
(sélectionnez d'abord la fenêtre de l'exemple).
</p>
Nous définissons ensuite un élément <div>
qui est le popup. Le contenu réel n'a pas d'importance, mais notez que nous avons besoin de l'attribut popover
pour faire du <div>
un popover afin qu'il soit masqué par défaut (nous pourrions également définir cet élément dans le JavaScript).
<div id="mypopover" popover>
<h2>Aides</h2>
<p>Vous pouvez utiliser les touches suivantes pour contrôlez l'application</p>
<ul>
<li>Pressez la touche <ins>C</ins> pour commander du fromage</li>
<li>Pressez la touche <ins>T</ins> pour commander du tofu</li>
<li>Pressez la touche <ins>B</ins> pour commander du bacon</li>
</ul>
</div>
JavaScript
Premièrement, nous vérifions que le navigateur prend en charge les popovers. Si ce n'est pas le cas, nous masquons la div
popover afin qu'elle ne soit pas visible par défaut.
const instructions = document.getElementById("instructions");
const popover = document.getElementById("mypopover");
if (!HTMLElement.prototype.hasOwnProperty("popover")) {
popover.innerText = "";
instructions.innerText =
"Votre navigateur ne prend pas en charge les popovers.";
}
Si les popovers sont supportés, nous ajoutons un gestionnaire d'évènement qui vérifie si la touche h est pressée, et si c'est le cas nous changeons l'état du popover. Nous affichons également l'état du popover après l'évènement, mais uniquement si les valeurs true
ou false
ont été retournées.
if (HTMLElement.prototype.hasOwnProperty("popover")) {
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
const popupOpened = popover.togglePopover();
// Vérifie si le popover est ouvert ou fermé
// sur les navigateurs qui le prennent en charge
if (popupOpened !== undefined) {
instructions.innerText += popupOpened === true ? `\nOuvert` : `\nFermé`;
}
}
});
}
Résultat
Spécifications
Specification |
---|
HTML Standard # dom-togglepopover |
Compatibilité des navigateurs
BCD tables only load in the browser