Bootstrap - 彈出框

上一頁
下一頁

本章將討論 Bootstrap 中的彈出框。彈出框通常包含與觸發元素相關的其他資訊、上下文或操作。

彈出框可能包含文字、影像、連結、按鈕或其他內容，具體取決於其目的和上下文。Bootstrap 提供了內建的彈出框元件，可以輕鬆整合到 Web 應用程式中。

使用彈出框外掛時需要注意的事項

  • 由於彈出框依賴於用於定位的第三方庫 Popper.js，因此必須在 bootstrap.js 之前包含 popper.min.js。
  • 作為依賴項，彈出框需要 彈出框外掛。
  • 由於效能原因，彈出框是可選的，因此必須先初始化它們。
  • 對於長度為零的 標題 和 內容 值，永遠不會顯示彈出框。
  • 觸發隱藏元素的彈出框將不起作用。
  • 對於 .disabled 或 disabled 元素的彈出框，必須使用包裝器元素觸發。
  • 為了避免彈出框在錨點的整體寬度之間居中，請在 <a> 上使用 white-space: nowrap;
  • 在從 DOM 中刪除任何元素之前，必須隱藏與之對應的彈出框。

啟用彈出框

透過其 data-bs-toggle 屬性初始化頁面上的所有彈出框

  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

建立彈出框

將 data-bs-toggle="popover" 屬性新增到元素，以建立彈出框。

  • data-bs-toggle 屬性定義了彈出框。

  • title 屬性定義了彈出框的標題

  • data-content 屬性定義了在相應彈出框中顯示的內容。

示例

讓我們看看建立彈出框的示例

您可以使用 編輯 & 執行 選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popover</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.tw/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Bootstrap creation</h4><br><br>
    <button type="button" class="btn btn-primary"
      data-bs-toggle="popover" data-bs-placement="top"
      data-bs-title="Popover"
      data-bs-content="It is a new popover.">
      Click to view popover
    </button>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

彈出框的定位

彈出框的定位有四個選項：左、右、上和下對齊。

預設情況下，彈出框將顯示在元素的右側。

data-bs-placement 屬性用於設定彈出框的位置。

示例

讓我們看看設定彈出框位置的示例

您可以使用 編輯 & 執行 選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popovers</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.tw/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Positioning of Popover</h4>
    <br><br><br>
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
      Popover on top
    </button>
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
      Popover on right
    </button>
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
      Popover on bottom
    </button>
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
      Popover on left
    </button>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

自定義彈出框

可以使用自定義類 data-bs-custom-class="custom-popover" 自定義彈出框的外觀。

示例

讓我們看看建立自定義彈出框的示例

您可以使用 編輯 & 執行 選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head&>
    <title>Bootstrap - Popovers</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Custom Popover</h4><br><br>
    <!-- Define custom container -->
    <button type="button" class="btn btn-primary"
        data-bs-toggle="popover" data-bs-placement="top"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="It is a custom popover.">
      Custom popover
    </button>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

可關閉的彈出框

預設情況下，再次單擊同一個元素時，彈出框將關閉。但是，可以使用屬性 data-bs-trigger="focus"，這將在單擊元素外部時關閉彈出框。

為了使彈出框在下次單擊時關閉，有必要使用特定的 HTML 程式碼，以確保在不同的瀏覽器和平臺上保持一致的行為

示例

讓我們看看可關閉彈出框的示例

您可以使用 編輯 & 執行 選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Dismissible Popover</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <div class="container mt-3">
      <h4>Dismissed on next click - Popover</h4><br>
      <a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>
      </div>
      <script>
       const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
       const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
      </script>
  </body>
</html>

彈出框的懸停

當滑鼠指標移到某個元素上，並且您希望在懸停時顯示彈出框時，請使用 data-bs-trigger="hover" 屬性。

示例

讓我們看看懸停彈出框的示例

您可以使用 編輯 & 執行 選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popover on hover</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <div class="container mt-3">
      <h4>Hoverable Popover</h4><br>
      <a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
      </div>
      <script>
       const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
       const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
      </script>
  </body>
</html>

停用元素上的彈出框

對於停用元素上的彈出框，您可能更喜歡 data-bs-trigger="hover focus"，以便彈出框作為即時視覺反饋顯示給您的使用者，因為他們可能不希望單擊停用元素。

示例

讓我們看看停用元素上彈出框的示例

您可以使用 編輯 & 執行 選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popovers</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Popover on Disabled Element</h4><br>
    <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
      <button class="btn btn-primary" type="button" disabled>Disabled button</button>
    </span>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

選項

  • 選項名稱可以附加到類 data-bs-，並且該選項可以作為屬性傳遞，例如 data-bs-boundary="{value}"。

  • 透過資料屬性傳遞選項時，請確保將大小寫型別從 "camelCase" 更改為 "kebab-case"，例如使用 data-bs-fallback-placements="[array]" 而不是 data-bs-fallbackPlacements="[array]"。

示例

這是一個將選項作為屬性新增到 .data-bs- 類的示例

您可以使用 編輯 & 執行 選項編輯和嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head&>
      <title>Bootstrap Popovers - Options</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <h4>Popover options</h4><br>
      <button type="button" class="btn btn-lg btn-success" data-bs-toggle="popover"  data-bs-title ="Title added through options and that overrides the title provided" title="Popover description" data-content="Popover desc">Click Me to view</button>
      <br><br>
      <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

下表顯示了 Bootstrap 提供的各種選項，可以將其作為資料屬性附加到類 .data-bs-。

名稱 型別 預設值 描述
allowList 物件 預設值 包含允許的屬性和標籤的物件。
animation 布林值 true 將 CSS 淡入淡出過渡應用於彈出框。
boundary 字串，元素 'clippingParents' 預設情況下，它是 'clippingParents'，並且可以接受 HTML 元素引用（僅限於 JavaScript）。
container 字串，元素，false false 將彈出框附加到特定元素。
customClass 字串，函式 '' 除了模板中指定的任何類之外，還將新增這些類。要新增多個類，請用空格分隔它們：'class-1 class-2'。
delay 數字，物件 0 顯示和隱藏彈出框的延遲（毫秒）。物件結構為：delay: { "show": 500, "hide": 100 }。
fallbackPlacements 陣列 ['top', 'right', 'bottom', 'left'] 透過在陣列中提供放置列表來定義備用放置。
html 布林值 false 允許在彈出框中使用 HTML。
offset 陣列，字串，函式 [0, 0] 相對於其目標的彈出框的偏移量。例如：data-bs-offset="10,20"。
placement 字串，函式 'top' 決定彈出框的位置。
popperConfig null，物件，函式 null 更改 Bootstrap 的預設 Popper 配置。
sanitize 布林值 true 啟用或停用清理。
sanitizeFn null，函式 null 您可以提供自己的清理函式。
selector 字串，false false 使用選擇器，彈出框物件將被委託給指定的 target。
template 字串 '
'		 建立彈出框時，使用基本 HTML。
title 字串，元素，函式 '' 它指的是彈出框的標題。
trigger 字串 'hover-focus' 顯示彈出框的觸發方式：click、hover、focus、manual。
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.