Bootstrap 彈出框


Bootstrap 彈出框（Popover）外掛程式

彈出框（Popover）與工具提示（Tooltip）類似，提供了擴充的視圖。如需啟動彈出框，使用者只需把滑鼠懸停在元素上即可。彈出框的內容完全可使用 Bootstrap 資料 API（Bootstrap Data API）來填入。此方法依賴工具提示（tooltip）。

如果您想要單獨引用該外掛程式的功能，那麼您需要引用 popover.js，它依賴 工具提示（Tooltip）外掛程式。或者，如 Bootstrap 外掛程式概覽 一章所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

彈出框（Popover）外掛程式會根據需求產生內容和標記，預設是把彈出框（popover）放在它們的觸發元素後面。您可以有以下兩種方式新增彈出框（popover）：

  • 透過data 屬性：如需新增一個彈出方塊（popover），只需向一個錨/按鈕標籤新增data-toggle="popover" 即可。錨的 title 即為彈出框（popover）的文字。預設情況下，外掛程式將彈出框（popover）設定在頂部。

<a href="#" data-toggle="popover" title="Example popover">
   請停留在我的上方
</a>

  • 透過JavaScript：透過JavaScript 啟用彈出框（popover）：

$('#identifier').popover(options)

彈出框（Popover）外掛程式不像之前所討論的下拉式選單及其他外掛程式那樣，它不是純CSS 外掛程式。如需使用該插件，您必須使用 jquery 啟動它（讀取 javascript）。使用下面的腳本來啟用頁面中的所有的彈出框（popover）：

$(function () { $("[data-toggle='popover']").popover() ; });

實例

下面的實例示範了透過data 屬性使用彈出框（Popover）外掛程式的用法。

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 弹出框（Popover）插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="padding: 100px 50px 10px;" >
   <button type="button" class="btn btn-default" title="Popover title"  
      data-container="body" data-toggle="popover" data-placement="left" 
      data-content="左侧的 Popover 中的一些内容">
      左侧的 Popover
   </button>
   <button type="button" class="btn btn-primary" title="Popover title"  
      data-container="body" data-toggle="popover" data-placement="top" 
      data-content="顶部的 Popover 中的一些内容">
      顶部的 Popover
   </button>
   <button type="button" class="btn btn-success" title="Popover title"  
      data-container="body" data-toggle="popover" data-placement="bottom" 
      data-content="底部的 Popover 中的一些内容">
      底部的 Popover
   </button>
   <button type="button" class="btn btn-warning" title="Popover title"  
      data-container="body" data-toggle="popover" data-placement="right" 
      data-content="右侧的 Popover 中的一些内容">
      右侧的 Popover
   </button>
   </div>

   <script>$(function () 
      { $("[data-toggle='popover']").popover();
      });
   </script>
</div>

</body>
</html>

執行實例 »

點擊 "執行實例" 按鈕查看線上實例

選項

有一些選項是透過 Bootstrap 資料 API（Bootstrap Data API）新增或透過 JavaScript 呼叫的。下表列出了這些選項：

##如果提供了一個選擇器，彈出框物件將被委派到指定的目標。 titlestring | functiondata-title如果未指定triggerstringdata-trigger #定義如何觸發彈出框：delaynumber | objectdata-delay#延遲顯示和隱藏彈出框的毫秒數- 對manual 手動觸發類型不適用。如果提供的是一個數字，那麼延遲將會套用於顯示和隱藏。如果提供的是對象，結構如下所示：
delay:
{ show: 500, hide: 100 }
containerstring | false#data-container向指定元素追加彈出方塊。 #

方法

下面是一些彈出框（Popover）外掛程式中有用的方法：

選項名稱#類型/預設值#Data 屬性名稱#描述
animationboolean
預設值：true		data-animation向彈出框應用CSS 褪色過渡效果。
htmlboolean
預設值：false		data-html向彈出框插入HTML。如果為 false，jQuery 的 text 方法將用於向 dom 插入內容。如果您擔心 XSS 攻擊，請使用 text。
placementstring|function
預設值：top		data-placement規定如何定位彈出框（即top|bottom|left|right|auto）。
當指定為 auto 時，會動態調整彈出框。例如，如果 placement 是 "auto left"，彈出框將會盡可能顯示在左邊，在情況不允許的情況下它才會顯示在右邊。
selectorstring
預設值：false		data-selector

預設值：''		title 屬性，則title 選項是預設的title 值。

預設值：'hover focus'		 click| hover | focus | manual。您可以傳遞多個觸發器，每個觸發器之間以空格分隔。

預設值：0

預設值：false		實例： container: 'body'
##描述實例向元素集合附加彈出方塊句柄。 
$().popover(options)
切換顯示/隱藏元素的彈出方塊。 
$('#element').popover('toggle')
顯示元素的彈出方塊。 
$('#element').popover('show')
隱藏元素的彈出框。 
$('#element').popover('hide')
隱藏並銷毀元素的彈出框。 
$('#element').popover('destroy')
#方法
Options: .popover(options)
Toggle: .popover('toggle')
Show: .popover('show')
Hide: .popover('hide')
Destroy: .popover('destroy')
#實例

下面的實例示範了彈出框（Popover）外掛程式的方法：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 弹出框（Popover）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="padding: 100px 50px 10px;" >
   <button type="button" class="btn btn-default popover-show" 
      title="Popover title" data-container="body" 
      data-toggle="popover" data-placement="left" 
      data-content="左侧的 Popover 中的一些内容 —— show 方法">
      左侧的 Popover
   </button>
   <button type="button" class="btn btn-primary popover-hide" 
      title="Popover title" data-container="body" 
      data-toggle="popover" data-placement="top" 
      data-content="顶部的 Popover 中的一些内容 —— hide 方法">
      顶部的 Popover
   </button>
   <button type="button" class="btn btn-success popover-destroy" 
      title="Popover title" data-container="body" 
      data-toggle="popover" data-placement="bottom" 
      data-content="底部的 Popover 中的一些内容 —— destroy 方法">
      底部的 Popover
   </button>
   <button type="button" class="btn btn-warning popover-toggle" 
      title="Popover title" data-container="body" 
      data-toggle="popover" data-placement="right" 
      data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
      右侧的 Popover
   </button><br><br><br><br><br><br>
   <p class="popover-options">
      <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"  
         data-container="body" data-toggle="popover" data-content="
         <h4>Popover 中的一些内容 —— options 方法</h4>">
         Popover
      </a>
   </p>
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
     $(function () { $(".popover-options a").popover({html : true });});
   </script>
</div>

</body>
</html>

運行實例»點擊"運行實例"按鈕查看線上實例

事件

下表列出了彈出框（Popover）外掛程式中要使用的事件。這些事件可在函數中當鉤子使用。

事件描述實例show.bs.popover當呼叫show 實例方法時立即觸發該事件。 
$('#mypopover').on('show.bs.popover', function () {
  // 执行一些动作...
})
shown.bs.popover當彈出方塊對使用者可見時觸發該事件（將等待 CSS 過渡效果完成）。 
$('#mypopover').on('shown.bs.popover', function () {
  // 执行一些动作...
})
hide.bs.popover當呼叫 hide 實例方法時立即觸發該事件。 
$('#mypopover').on('hide.bs.popover', function () {
  // 执行一些动作...
})
hidden.bs.popover當工具提示對使用者隱藏時觸發該事件（將等待 CSS 過渡效果完成）。 
$('#mypopover').on('hidden.bs.popover', function () {
  // 执行一些动作...
})
#實例

下面的實例示範了彈出框（Popover）外掛程式的事件：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 弹出框（Popover）插件事件</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div clas="container" style="padding: 100px 50px 10px;" >
   <button type="button" class="btn btn-primary popover-show" 
      title="Popover title" data-container="body" 
      data-toggle="popover" 
      data-content="左侧的 Popover 中的一些内容 —— show 方法">
      左侧的 Popover
   </button>

   </div>
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("当显示时警告消息");
   })});
   </script>
</div>

</body>
</html>

運行實例»點擊"運行實例"按鈕查看線上實例

←
→