Bootstrap5 弹出框

弹出框简介

弹出框是一种常用的用户界面组件，用于显示额外的信息或提供交互操作。Bootstrap 提供了多种弹出框类型，如模态对话框、提示框等，帮助开发者快速创建功能丰富的前端应用。

模态对话框

基础模态对话框

模态对话框是阻止用户与页面其他部分交互的窗口。要使用 Bootstrap 的模态对话框，需要添加 .modal 类，并确保为模态对话框设置了 role="dialog" 属性。以下是一个基础模态对话框的示例：

// www.javascriptcn.com code example
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态对话框
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" 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>

自定义模态对话框

除了基础模态对话框外，Bootstrap 还允许开发者自定义模态对话框的样式和行为。例如，可以通过 CSS 修改模态对话框的背景颜色、字体等。

// www.javascriptcn.com code example
<style>
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
  border-radius: 10px;
}
</style>

<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#customModal">
  打开自定义模态对话框
</button>

<div class="modal fade" id="customModal" tabindex="-1" aria-labelledby="customModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="customModalLabel">自定义模态对话框</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>

提示框

基础提示框

提示框是一种轻量级的浮动窗口，通常用于向用户提供简短的信息。使用 Bootstrap 提供的提示框组件可以快速实现这一功能。提示框的基本用法如下：

<a href="#" data-bs-toggle="tooltip" title="这是一个提示信息">悬停查看提示框</a>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

自定义提示框

除了默认的提示框，还可以通过添加自定义类或直接修改提示框的样式来满足特定的设计需求。

// www.javascriptcn.com code example
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="这是顶部提示框">顶部提示框</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="这是底部提示框">底部提示框</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="这是左侧提示框">左侧提示框</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="这是右侧提示框">右侧提示框</a>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

插件和 JavaScript

Bootstrap 的弹出框组件依赖于 jQuery 和 Popper.js 库。对于 Bootstrap 5，Popper.js 已经集成到核心库中，无需单独引入。此外，Bootstrap 5 使用了更现代的原生 JavaScript API 来增强可访问性和性能。

要初始化弹出框插件，可以使用 new bootstrap.Modal() 或 new bootstrap.Tooltip() 等构造函数。此外，也可以通过数据属性（如 data-bs-toggle="modal"）自动触发弹出框的显示和隐藏。

// www.javascriptcn.com code example
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态对话框
</button>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script>
  var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
    keyboard: false
  })
  myModal.show()
</script>

以上就是 Bootstrap 5 中关于弹出框的基础使用方法和一些高级技巧。通过灵活运用这些组件和插件，你可以轻松地为你的网站或应用增加更多交互性和用户体验。