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 dc6dce4a544fdca2df29d5ac0ea9906b, puis appliquez la boîte contextuelle à cet élément dc6dce4a544fdca2df29d5ac0ea9906b é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.