Le composant JS Bootstrap implémente les compétences code_javascript de l'effet de boîte contextuelle

Ajoute une petite superposition au contenu de la page, tout comme l'effet sur l'iPad, ajoutant des informations supplémentaires aux éléments de la page.

Dépendances du plug-in
La boîte contextuelle repose sur le plug-in d'info-bulle, ce dernier doit donc être chargé en premier.
Fonctionnalité d'inscription
Pour des raisons de performances, l'API d'attribut de données des composants d'info-bulle et de popup est facultative, ce qui signifie que vous devez les initialiser vous-même.
Lorsque la boîte contextuelle est utilisée dans un groupe de boutons et un groupe de zones de saisie, des paramètres supplémentaires sont requis
Lorsque la popup est utilisée conjointement avec .btn-group ou .input-group, vous devez spécifier l'option conteneur : 'body' (voir la documentation ci-dessous) pour éviter les effets secondaires indésirables (par exemple, après l'affichage de la popup , Les éléments de page avec lesquels il fonctionne peuvent devenir plus larges ou avoir des coins arrondis).
Lorsque vous utilisez une boîte pop-up sur un élément de page interdit, vous devez ajouter un élément supplémentaire pour l'envelopper
Pour ajouter une boîte contextuelle à un élément désactivé ou .disabled, enveloppez l'élément de page auquel la boîte contextuelle doit être ajoutée dans un

, puis appliquez la boîte contextuelle à cet élément

élément.
1. Cas statique
4 options optionnelles : disposition en haut, à droite, en bas et à gauche.

Extrait de code

.bs-example 
  { 
   border-color:#ddd; 
   border-radius:4px 4px 0 0; 
   border-width:1px; 
   box-shadow:none; 
   margin-left:0; 
   margin-right:0; 
   border-style:solid; 
  } 
 .bs-example-popover .popover { 
  position: relative; 
  display: block; 
  float: left; 
  width: 240px; 
  margin: 20px; 
} 

<h1 class="page-header">3、弹出框</h1> 
 <div class="bs-example bs-example-popover"> 
 <div class="popover top"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover top</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
 </div> 
 <div class="popover right"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover right</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 
  <div class="popover bottom"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover bottom</h3> 
 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 
  <div class="popover left"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover left</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 </div> 

Effet d'aperçu

Extrait de code :

<a href="javascript:void(0)" id="a_pop" class="btn btn-danger" data-placement="bottom" data-content=" 
 风吹雨成花 时间追不上白马 
你年少掌心的梦话 依然紧握着吗 
云翻涌成夏 眼泪被岁月蒸发 
这条路上的你我她 有谁迷路了吗 
 
我们说好不分离 要一直一直在一起 
就算与时间为敌 就算与全世界背离 
风吹亮雪花 吹白我们的头发 
当初说一起闯天下 你们还记得吗 
 
那一年盛夏 心愿许的无限大 
我们手拉手也成舟 划过悲伤河流 
 
你曾说过不分离 要一直一直在一起 
现在我想问问你 是否只是童言无忌 
 
天真岁月不忍欺 青春荒唐我不负你 
大雪求你别抹去 我们在一起的痕迹 
 
大雪也无法抹去 我们给彼此的印记 
今夕何夕 青草离离 
明月夜送君千里 等来年 秋风起" 
 data-original-title="时间煮雨" 
 >点击加载</a> 

<strong>js初始化：</strong> 
<script type="text/javascript"> 
 $("#a_pop").popover(); 
</script> 

Effet d'aperçu :

Notez que lors de la spécification de l'emplacement, portez une attention particulière à la direction. Étant donné que la boîte contextuelle commence à apparaître à partir du centre de l'élément qui déclenche l'événement, elle peut être masquée et ne pas pouvoir être entièrement affichée.

L'attribut href de la balise a dans le code doit être spécifié comme javascript:void(0) pour supprimer l'effet de lien.

Quatre directions :

Code

<a href="javascript:void(0)" id="a_pop1" class="btn btn-danger" data-placement="left" data-content= 
 " 
 风吹雨成花 时间追不上白马 
 你年少掌心的梦话 依然紧握着吗 
 云翻涌成夏 眼泪被岁月蒸发 
 这条路上的你我她 有谁迷路了吗 
 " 
 data-original-title="时间煮雨" 
 >左侧</a> 
 <a href="javascript:void(0)" id="a_pop2" class="btn btn-danger" data-placement="top" data-content= 
 " 
我们说好不分离 要一直一直在一起 
就算与时间为敌 就算与全世界背离 
风吹亮雪花 吹白我们的头发 
当初说一起闯天下 你们还记得吗 
 " data-original-title="时间煮雨"> 
 上部 
 </a> 
 <a href="javascript:void(0)" id="a_pop3" class="btn btn-danger" data-placement="bottom" data-content= 
 " 
那一年盛夏 心愿许的无限大 
我们手拉手也成舟 划过悲伤河流 
你曾说过不分离 要一直一直在一起 
现在我想问问你 是否只是童言无忌 
 " data-original-title="时间煮雨"> 
 下部 
 </a> 
 <a href="javascript:void(0)" id="a_pop4" class="btn btn-danger" data-placement="right" data-content= 
 " 
 天真岁月不忍欺 青春荒唐我不负你 
大雪求你别抹去 我们在一起的痕迹 
大雪也无法抹去 我们给彼此的印记 
今夕何夕 青草离离 
明月夜送君千里 等来年 秋风起 
 " data-original-title="时间煮雨"> 
 右侧 
 </a> 
 </div> 
 <script type="text/javascript"> 
  $("#a_pop1").popover(); 
  $("#a_pop2").popover(); 
  $("#a_pop3").popover(); 
  $("#a_pop4").popover(); 
 </script> 

Effet d'aperçu ;

2.Options
Les options peuvent être transmises via des attributs de données ou JavaScript. Pour l'attribut data, vous devez mettre le nom de l'option après data-, tel que data-animation="".

Appliquer l'attribut de données à une seule boîte contextuelle
Pour une seule boîte contextuelle, les options peuvent être spécifiées individuellement via l'attribut data, comme indiqué ci-dessus.

3. Méthode
$().popover(options)

Initialisez une boîte contextuelle pour un ensemble d'éléments.

.popover('show')

Afficher la fenêtre contextuelle.

$('#element').popover('show')
.popover('masquer')

Masquer la fenêtre contextuelle.

$('#element').popover('hide')
.popover('toggle')

Afficher ou masquer la fenêtre contextuelle.

$('#element').popover('toggle')
.popover('destroy')

Masquer et détruire la fenêtre contextuelle.

$('#element').popover('destroy')

4. Événements

$('#myPopover').on('hidden.bs.popover',
function
() {
//
 do something…})

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre et de maîtriser la boîte contextuelle Bootstrap.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes

1 Il y a quelques mois By DDD

<🎜>: Dead Rails - Comment relever chaque défi

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7625

15

Tutoriel CakePHP

1389

52

Quel est le format du nom de compte de Steam

89

11

Clé d&amp;amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

70

19

NYT Connexions Indices et réponses

31

138

Afficher plus