Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

預覽效果

代碼段：

點擊加載

js初始化： 
 
 $("#a_pop").popover(); 

預覽效果：

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

代碼中a標簽href屬性必須指定為javascript:void(0)去除鏈接效果。

四個方位：

代碼

左側(cè) 
  
 上部 
  
  
 下部 
  
  
 右側(cè) 
  
  
  
  $("#a_pop1").popover(); 
  $("#a_pop2").popover(); 
  $("#a_pop3").popover(); 
  $("#a_pop4").popover(); 
 

預覽效果；

二、選項
可以將選項通過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…})

到此，相信大家對“如何使用JS組件Bootstrap實現(xiàn)彈出框效果”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！