Die JS-Komponente Bootstrap implementiert Code_Javascript-Fähigkeiten mit Popup-Box-Effekt

Fügt dem Seiteninhalt ein kleines Overlay hinzu, genau wie der Effekt auf dem iPad, und fügt den Seitenelementen zusätzliche Informationen hinzu.

Plug-in-Abhängigkeiten
Das Popup-Fenster hängt vom Tooltip-Plugin ab, daher muss das Tooltip-Plugin zuerst geladen werden.
Opt-in-Funktion
Aus Leistungsgründen ist die Datenattribut-API von Tooltip- und Popup-Komponenten optional, was bedeutet, dass Sie sie selbst initialisieren müssen.
Wenn das Popup-Feld in einer Schaltflächengruppe und einer Eingabefeldgruppe verwendet wird, sind zusätzliche Einstellungen erforderlich
Wenn das Popup in Verbindung mit .btn-group oder .input-group verwendet wird, müssen Sie die Container-Option „body“ angeben (siehe Dokumentation unten), um unerwünschte Nebenwirkungen zu vermeiden (z. B. nach der Anzeige des Popups). , Die Seitenelemente, mit denen es arbeitet, können breiter werden oder abgerundete Ecken haben.
Wenn Sie ein Popup-Fenster für ein verbotenes Seitenelement verwenden, müssen Sie ein zusätzliches Element hinzufügen, um es zu umschließen
Um ein Popup-Feld zu einem deaktivierten oder .disabled-Element hinzuzufügen, schließen Sie das Seitenelement, zu dem das Popup-Feld hinzugefügt werden muss, in ein dc6dce4a544fdca2df29d5ac0ea9906b ein und wenden Sie dann das Popup-Feld auf dieses dc6dce4a544fdca2df29d5ac0ea9906b an. Element.
1. Statischer Fall
4 optionale Optionen: Anordnung oben, rechts, unten und links.

Codeausschnitt

.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> 

Vorschaueffekt

Codeausschnitt:

<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> 

Vorschaueffekt:

Beachten Sie, dass Sie bei der Angabe der Platzierung besonders auf die Richtung achten sollten. Da das Popup-Feld in der Mitte des Elements erscheint, das das Ereignis auslöst, wird es wahrscheinlich verdeckt und kann nicht vollständig angezeigt werden.

Das href-Attribut des a-Tags im Code muss als javascript:void(0) angegeben werden, um den Linkeffekt zu entfernen.

Vier Richtungen:

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> 

Vorschaueffekt;

2. Optionen
Optionen können über Datenattribute oder JavaScript übergeben werden. Für das Datenattribut müssen Sie den Optionsnamen nach data- einfügen, z. B. data-animation="".

Datenattribut auf ein einzelnes Popup-Feld anwenden
Für ein einzelnes Popup-Feld können Optionen individuell über das Datenattribut angegeben werden, wie oben gezeigt.

3. Methode
$().popover(options)

Initialisieren Sie ein Popup-Fenster für eine Reihe von Elementen.

.popover('show')

Popup anzeigen.

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

Popup ausblenden.

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

Das Popup anzeigen oder ausblenden.

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

Verstecke und zerstöre das Popup.

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

4. Veranstaltungen

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist, die Bootstrap-Popup-Box zu erlernen und zu beherrschen.