Bootstrap JS 彈出框
JS 彈出框 (popover.js)
彈出框外掛類似於工具提示;它是一個彈出框,當用戶點選一個元素時出現。不同之處在於彈出框可以包含更多內容。
外掛依賴:彈出框需要您的 Bootstrap 版本中包含工具提示外掛 (tooltip.js)。
有關彈出框的教程,請閱讀我們的Bootstrap 彈出框教程。
透過 data-* 屬性
data-toggle="popover"
啟用彈出框。
title
屬性指定彈出框的標題文字。
data-content
屬性指定應在彈出框正文中顯示的文字。
透過 JavaScript
彈出框不是純 CSS 外掛,因此必須使用 jQuery 初始化:選擇指定的元素並呼叫 popover()
方法。
示例
// 選擇文件中所有 data-toggle="popover" 的元素
$('[data-toggle="popover"]').popover();
// 選擇指定元素
$('#myPopover').popover();
自己動手試一試 »
彈出框選項
選項可以透過資料屬性或 JavaScript 傳遞。對於資料屬性,將選項名稱附加到 data-,例如 data-placement=""。
名稱 | 型別 | 預設值 | 描述 | 試一試 |
---|---|---|---|---|
animation | boolean | true |
指定在開啟和關閉彈出框時是否新增 CSS 淡入淡出過渡效果
|
試一試 |
container | 字串,或布林值 false | false | 將彈出框附加到特定元素。 示例:container: 'body' |
試一試 |
content | string | "" | 指定彈出框正文中的文字 | 試一試 |
delay | 數字,或物件 | 0 | 指定開啟和關閉彈出框所需的毫秒數。 要分別為開啟和關閉指定延遲,請使用物件結構 delay: {show: 500, hide: 100} - 這將需要 500 毫秒開啟彈出框,但只需 100 毫秒關閉它 |
試一試 |
html | boolean | false | 指定是否在彈出框中接受 HTML 標籤
當設定為 false(預設)時,將使用 jQuery 的 text() 方法。如果您擔心 XSS 攻擊,請使用此選項 |
試一試 |
placement | string | "right" | 指定彈出框位置。可能的值
|
試一試 |
selector | 字串,或布林值 false | false | 將彈出框新增到指定的選擇器 | 試一試 |
template | string | 建立彈出框時使用的基本 HTML。 彈出框的標題將被注入到 .popover-title 中。 彈出框的內容將被注入到 .popover-content 中。 .arrow 將成為彈出框的箭頭。 最外層包裝元素應具有 .popover 類。 |
||
title | string | "" | 指定彈出框的標題文字 | 試一試 |
trigger | string | "click" | 指定彈出框的觸發方式。可能的值
|
試一試 |
viewport | 字串或物件 | {selector: "body", padding: 0} | 將彈出框保持在此元素的邊界內。 示例:viewport: '#viewport' 或 {selector: '#viewport', padding: 0} |
彈出框方法
下表列出了所有可用的彈出框方法。
方法 | 描述 | 試一試 |
---|---|---|
.popover(選項) | 使用選項啟用彈出框。有關有效值,請參閱上面的選項 | 試一試 |
.popover("show") | 顯示彈出框 | 試一試 |
.popover("hide") | 隱藏彈出框 | 試一試 |
.popover("toggle") | 切換彈出框 | 試一試 |
.popover("destroy") | 隱藏並銷燬彈出框 | 試一試 |
彈出框事件
下表列出了所有可用的彈出框事件。
事件 | 描述 | 試一試 |
---|---|---|
show.bs.popover | 當彈出框即將顯示時發生 | 試一試 |
shown.bs.popover | 當彈出框完全顯示時發生(在 CSS 過渡完成後) | 試一試 |
hide.bs.popover | 當彈出框即將隱藏時發生 | 試一試 |
hidden.bs.popover | 當彈出框完全隱藏時發生(在 CSS 過渡完成後) | 試一試 |
更多示例
自定義彈出框設計
使用 CSS 自定義彈出框的外觀
示例
/* 彈出框 */
.popover {
border: 2px dotted red;
}
/* 彈出框標題 */
.popover-title {
background-color: #73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* 彈出框主體 */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* 彈出框箭頭 */
.arrow {
border-right-color: red !important;
}
自己動手試一試 »