選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap JS 彈出框


JS 彈出框 (popover.js)

彈出框外掛類似於工具提示;它是一個彈出框,當用戶點選一個元素時出現。不同之處在於彈出框可以包含更多內容。

外掛依賴:彈出框需要您的 Bootstrap 版本中包含工具提示外掛 (tooltip.js)。

有關彈出框的教程,請閱讀我們的Bootstrap 彈出框教程


透過 data-* 屬性

data-toggle="popover" 啟用彈出框。

title 屬性指定彈出框的標題文字。

data-content 屬性指定應在彈出框正文中顯示的文字。

示例

<a href="#" data-toggle="popover" title="彈出框標題" data-content="彈出框中的一些內容">切換彈出框</a>
自己動手試一試 »

透過 JavaScript

彈出框不是純 CSS 外掛,因此必須使用 jQuery 初始化:選擇指定的元素並呼叫 popover() 方法。

示例

// 選擇文件中所有 data-toggle="popover" 的元素
$('[data-toggle="popover"]').popover();

// 選擇指定元素
$('#myPopover').popover();
自己動手試一試 »


彈出框選項

選項可以透過資料屬性或 JavaScript 傳遞。對於資料屬性,將選項名稱附加到 data-,例如 data-placement=""。

名稱 型別 預設值 描述 試一試
animation boolean true

指定在開啟和關閉彈出框時是否新增 CSS 淡入淡出過渡效果

  • true - 新增淡入淡出效果
  • false - 不新增淡入淡出效果
試一試
container 字串,或布林值 false false 將彈出框附加到特定元素。
示例:container: 'body'
試一試
content string "" 指定彈出框正文中的文字 試一試
delay 數字,或物件 0 指定開啟和關閉彈出框所需的毫秒數。

要分別為開啟和關閉指定延遲,請使用物件結構

delay: {show: 500, hide: 100} - 這將需要 500 毫秒開啟彈出框,但只需 100 毫秒關閉它
試一試
html boolean  false 指定是否在彈出框中接受 HTML 標籤
 
  • true - 接受 HTML 標籤
  • false - 不接受 HTML 標籤
注意: HTML 必須插入到 title 屬性中(或使用 title 選項)。

當設定為 false(預設)時,將使用 jQuery 的 text() 方法。如果您擔心 XSS 攻擊,請使用此選項
試一試
placement string "right" 指定彈出框位置。可能的值

  • "top" - 彈出框在頂部
  • "bottom" - 彈出框在底部
  • "left" - 彈出框在左側
  • "right" - 彈出框在右側
  • "auto" - 讓瀏覽器決定彈出框的位置。例如,如果值為 "auto left",則彈出框將在可能時顯示在左側,否則顯示在右側。如果值為 "auto bottom",則彈出框將在可能時顯示在底部,否則顯示在頂部
試一試
selector 字串,或布林值 false false 將彈出框新增到指定的選擇器 試一試
template string   建立彈出框時使用的基本 HTML。

彈出框的標題將被注入到 .popover-title 中。

彈出框的內容將被注入到 .popover-content 中。

.arrow 將成為彈出框的箭頭。

最外層包裝元素應具有 .popover 類。
title string "" 指定彈出框的標題文字 試一試
trigger string "click" 指定彈出框的觸發方式。可能的值

  • "click" - 透過點選觸發彈出框
  • "hover" - 滑鼠懸停時觸發彈出框
  • "focus" - 獲得焦點時觸發彈出框(例如透過 Tab 鍵或點選)
  • "manual" - 手動觸發彈出框
提示:要傳遞多個值,請用空格分隔
試一試
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;
}
自己動手試一試 »

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援