JS元件Bootstrap實作彈出框效果程式碼_javascript技巧

為頁面內容添加一個小的覆蓋層，就像iPad上的效果一樣，為頁面元素增加額外的資訊。

外掛依賴
彈出框依賴工具提示插件，因此需要先載入工具提示插件。
選擇性加入的功能
出於效能方面的考慮，工具提示和彈框組件的data屬性api是選擇性加入的，也就是說你必須自己初始化他們。
彈出框在按鈕組和輸入框組中使用時，需要額外的設定
當提示框與.btn-group 或.input-group合併使用時，你需要指定container: 'body'選項（見下面的文件）以避免不需要的副作用（例如，當彈出框顯示之後，與其合作的頁面元素可能變得更寬或去圓角）。
在禁止使用的頁面元素上使用彈出框時需要額外增加一個元素將其包裹起來
為了在disabled 或.disabled元素中新增彈出框時，將需要增加彈出框的頁面元素包裹在一個

中，然後對這個

元素套用彈出框。
一、靜態案例
4個選用選項：top、right、bottom,和left排列。

程式碼段

.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 id="弹出框">3、弹出框</h1> 
 <div class="bs-example bs-example-popover"> 
 <div class="popover top"> 
  <div class="arrow"></div> 
  <h3 id="Popover-top">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 id="Popover-right">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 id="Popover-bottom">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 id="Popover-left">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> 

預覽效果

程式碼段：

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

預覽效果：

注意，當指定了placement時候，特別注意方向問題。因為彈出框是以觸發事件元素中心開始彈出，很可能被覆蓋而無法全部顯示出來。

程式碼中a標籤href屬性必須指定為javascript:void(0)去除連結效果。

四個方位：

代碼

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

預覽效果；

二、選項
可以將選項透過data屬性或JavaScript傳遞。對於data屬性，需要將選項名稱放到data-之後，例如data-animation=""。

為單一彈出框套用data屬性
對單一彈出框可以透過data屬性單獨指定選項，如上所示。

三、方法
$().popover(options)

為一組元素初始化彈出框。

.popover('show')

顯示彈出框。

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

隱藏彈出框。

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

展示或隱藏彈出框。

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

隱藏並銷毀彈出框。

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

四、事件

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

以上就是本文的全部內容，希望對大家學習掌握Bootstrap彈出框有所幫助。