来自 div 的 bootstrap 4 弹出内容 - CSS

在网站开发过程中，弹出框（Popup）是一个非常重要的组件，因为它可以帮助我们显示重要的信息或者提醒用户在某些操作之前需要注意。

Bootstrap 4 是一个流行的前端开发框架，它提供了一个叫做弹出框（Popover）的组件。这个组件可以在 HTML 元素中弹出一个内容层，非常方便。

本文将介绍如何使用 Bootstrap 4 的弹出框组件，来制作一个来自 div 的弹出内容。

准备

首先，我们需要准备一个 div 元素，这个元素将作为弹出内容的容器。

<div id="popover-content" style="display:none">
  <p>这是一个来自 div 的弹出内容。</p>
</div>

注意，这个 div 元素的 display 属性设置为 none，表示一开始不显示。

HTML 元素

接下来，我们需要为 HTML 元素添加一个 data-toggle 和 data-placement 属性，用于触发和定位弹出框。

<button type="button"
        class="btn btn-primary"
        data-toggle="popover"
        data-placement="bottom"
        data-html="true"
        data-content="#popover-content">
  点击我弹出内容
</button>

• data-toggle：指定要使用哪个组件，我们这里选择 popover。
• data-placement：指定弹出框的位置，这里我们选择 bottom，在被弹出元素下方。
• data-html：指定弹出框内容是否支持 HTML 标签。
• data-content：指定要弹出的内容，这里我们选择刚才准备好的 div 元素。

JavaScript

最后，我们需要使用 JavaScript 来初始化弹出框。

$(function () {
  $('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'hover focus',
    html: true
  })
})

这里使用了 jQuery 库中的 popover 方法来初始化弹出框。我们指定了 container、trigger 和 html 这三个参数：

• container：指定弹出框的父元素，这里我们选择 body。
• trigger：指定触发弹出框的方式，这里我们选择 hover 和 focus，表示鼠标悬浮和元素获得焦点时触发。
• html：指定弹出框内容是否支持 HTML 标签。

完整代码片段

<div id="popover-content" style="display:none">
  <p>这是一个来自 div 的弹出内容。</p>
</div>

<button type="button"
        class="btn btn-primary"
        data-toggle="popover"
        data-placement="bottom"
        data-html="true"
        data-content="#popover-content">
  点击我弹出内容
</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
  $(function () {
    $('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'hover focus',
      html: true
    })
  })
</script>

以上代码片段的预览效果如下：

使用 Bootstrap 4 的弹出框组件来制作来自 div 的弹出内容非常简单，只需要几行代码就可以实现。希望本文对你有所帮助！