API HTML `Popover` pour le contenu de superposition

L'API Popover est une solution de mise en œuvre de la couche popup légère nativement prise en charge par le navigateur. Lorsque vous l'utilisez, vous devez d'abord ajouter des attributs de popover et afficher et les masquer en combinaison avec le contrôle JS. 1. Ajouter des attributs de popover à l'élément cible pour définir le contenu contextuel; 2. Contrôlez l'état d'affichage de la couche popup via les méthodes showpopover () et hidepover (); 3. Les clics du bouton commun peuvent également être déclenchés, mais la compatibilité est limitée; 4. Évitez le positionnement absolu / fixe avec style. Il est recommandé de définir l'arrière-plan, la bordure, l'ombre et l'index z pour assurer le niveau; 5. Actuellement, le support Chrome et Edge est bon, Firefox est au stade expérimental et Safari ne le soutient pas pour le moment. Il est recommandé d'ajouter la détection des fonctionnalités pour fournir une solution de secours.

Il est en fait assez simple d'utiliser l'API popover de HTML pour couvrir le contenu, et il est pris en charge nativement, il n'est donc pas nécessaire d'introduire des bibliothèques JS supplémentaires. Il peut vous aider à obtenir rapidement des effets tels que des calques contextuels, des boîtes d'invite, etc., comme cliquer sur un bouton pour afficher un paragraphe de texte ou de menu d'instructions.

Qu'est-ce que l'API Popover?

L'API Popover est un ensemble de mécanismes fournies par le navigateur pour créer des superpositions interactives. Il vous suffit d'ajouter un attribut popover , puis de l'afficher et de le masquer avec un contrôle JavaScript. Ce n'est pas tout à fait la même chose que l'info-bulle traditionnelle ou le modal, car il est plus léger et adapté aux pop-ups liés au contexte.

Vous pouvez ajouter cet attribut à n'importe quel élément:

 <div id = "my-popover" popover> Bonjour, je suis un popover! </div>

Puis afficher ou masquer via le contrôle JS:

 const popover = document.getElementById («my-popover»);
popover.showpopover (); // montre Popover.HidepoPover (); // Cacher

Comment déclencher l'écran Popover?

Le moyen le plus courant est de le déclencher en un clic de bouton. Vous devez associer l'élément de déclenchement à Popover. La pratique habituelle consiste à écouter l'événement de clic du bouton, puis d'appeler la méthode correspondante.

Par exemple:

 <bouton onclick = "togglepopover ()"> toggle </ftont>
<div id = "my-popover" popover> c&#39;est la popup </div>

La partie JS peut être écrite comme ceci:

 fonction togglepopover () {
  const popover = document.getElementById («my-popover»);
  if (popover.matches (': popover-open')) {
    popover.hidepopover ();
  } autre {
    popover.showpopover ();
  }
}

Bien sûr, vous pouvez également utiliser Hover pour contrôler l'écran, mais la prise en charge n'est pas très stable à l'heure actuelle, il est donc recommandé d'utiliser le clic pour le déclencher en premier.

À quoi dois-je prêter attention en ce qui concerne le style et le positionnement?

Bien que l'élément popover apparaisse à côté de l'élément de déclenchement par défaut, sa méthode de positionnement est différente du positionnement fixe / absolu normal. Il est automatiquement déterminé par le navigateur, dans le but d'éviter d'être tronqué ou hors de la plage de la fenêtre.

Si vous souhaitez personnaliser le style, vous pouvez définir des arrière-plans, des bordures, des ombres, etc. via CSS, mais faites attention aux points suivants:

• N'utilisez pas position: absolute ou fixed , sinon cela affectera la logique de positionnement automatique du navigateur.
• Il est recommandé d'utiliser z-index pour ajuster le niveau pour s'assurer que la couche pop-up n'est pas bloquée.
• Si vous voulez qu'il ait une animation, vous pouvez utiliser transition , mais veillez à affecter les performances.

Par exemple, définissez un style simple:

 [popover] {
  Color d'arrière-plan: #FFF;
  Border: 1px solide #ccc;
  rembourrage: 10px;
  Box-Shadow: 0 2px 8px RGBA (0, 0, 0, 0,1);
}

Soutenir la situation et les problèmes de compatibilité

Actuellement, popover est soutenue dans Chrome et Edge, et Firefox est toujours au stade expérimental, et Safari n'est pas pris en charge pour le moment. Donc, si vous prévoyez de l'utiliser dans un environnement de production, il est recommandé d'ajouter la détection des fonctionnalités pour déterminer s'il le prend en charge ou se préparer à un plan de repli.

La méthode pour détecter si elle est prise en charge est simple:

 if ('showpopover' dans htmlelement.prototype) {
  // Vous pouvez utiliser Popover en toute confiance
} autre {
  // utilise d'autres méthodes pour remplacer}

Fondamentalement, c'est tout. Bien que les fonctions soient toujours améliorées, comme une solution pour implémenter rapidement les couches contextuelles légères, popover est en effet un bon choix.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!