bootstrap5 弹窗实现

在 Bootstrap 5 中，可以使用 `Modal` 组件来创建弹窗。

以下是一个简单的示例：

<!-- 按钮触发弹窗 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开弹窗
</button>

<!-- 弹窗 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">弹窗标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        弹窗内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

在这个示例中，我们使用 `data-bs-toggle="modal"` 和 `data-bs-target="#myModal"` 属性将一个按钮与弹窗关联起来。

弹窗的基本结构是一个 `div` 元素，其中包含一个 `modal-dialog` 元素，它进一步包含 `modal-content` 元素。 `modal-content` 元素包含弹窗的标题、内容和底部按钮。

通过 `modal-header`、`modal-body` 和 `modal-footer` 类来设置弹窗的头部、主体和底部。

最后，通过 `data-bs-dismiss="modal"` 属性在关闭按钮上触发弹窗的关闭事件。

注意：在 Bootstrap 5 中，需要引入 `bootstrap.bundle.min.js` 文件来使用弹窗组件。