Bootstrap - 弹出窗口

本章将讨论 Bootstrap 中的弹出窗口。弹出窗口通常包含与触发元素相关的附加信息、上下文或操作。

弹出窗口可能包含文本、图像、链接、按钮或其他内容，具体取决于其目的和上下文。Bootstrap 提供了内置的弹出窗口组件，可以轻松集成到 Web 应用程序中。

使用 popover 插件时要记住的事项：

  • 由于弹出窗口依赖于第三方库Popper.js进行定位，因此您必须在bootstrap.js之前包含popper.min.js 。
  • 作为依赖项，弹出窗口需要弹出窗口插件。
  • 您必须首先初始化弹出窗口，因为出于性能原因选择加入弹出窗口。
  • 对于零长度标题和内容值，永远不会显示弹出窗口。
  • 触发弹出窗口不适用于隐藏元素。
  • .disabled或禁用元素的弹出窗口必须使用包装元素触发。
  • 为了避免弹出框在锚点的整体宽度之间居中，请使用white-space: nowrap; 在<a>上
  • 从 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://getbootstrap.com/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://getbootstrap.com/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 代码来确保不同浏览器和平台之间的Behave一致

例子

让我们看一个可关闭弹出窗口的示例：

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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= “[数组]”。

例子

以下是作为属性添加到.data-bs- class的选项示例：

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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-类中。

姓名 类型 默认 描述
允许列表 目的 默认值 包含允许的属性和标签的对象。
动画片 布尔值 真的 CSS 淡入淡出过渡应用于弹出窗口。
边界 字符串、元素 '剪辑父母' 默认情况下，它是“clippingParents”并且可以接受 HTML 元素引用（仅通过 JavaScript）。
容器 字符串、元素、假 错误的 将弹出窗口附加到特定元素。
自定义类 字符串、函数 ” 除了模板中指定的任何类之外，还将添加这些类。要添加多个类，请用空格分隔它们：“class-1 class-2”。
延迟 数量、物体 0 延迟显示和隐藏弹出窗口（毫秒）。对象结构为：delay: { "show": 500, "hide": 100 }。
回退展示位置 大批 [‘上’、‘右’、‘下’、‘左’] 通过提供数组中的展示位置列表来定义后备展示位置。
html 布尔值 错误的 允许弹出窗口中包含 HTML。
抵消 数组、字符串、函数 [0, 0] 弹出窗口相对于其目标的偏移。例如：data-bs-offset="10,20"。
放置 字符串、函数 '顶部' 决定弹出框的位置。
波普配置 null、对象、函数 无效的 更改 Bootstrap 的默认 Popper 配置。
消毒 布尔值 真的 启用或禁用清理。
消毒Fn 空，函数 无效的 您可以提供自己的清理功能。
选择器 字符串，假 错误的 使用选择器，弹出窗口对象将被委托给指定的目标。
模板 细绳 '
'		 创建弹出窗口时，请使用基本 HTML。
标题 字符串、元素、函数 ” 它指的是弹出窗口的标题。
扳机 细绳 “悬停焦点” 显示如何触发弹出窗口：单击、悬停、聚焦、手动。