在 Bootstrap 5 中，模态框（Modal） 是一种用于在页面上显示浮动窗口的组件，通常用于显示警告、表单、提示或任何需要用户交互的内容。模态框通常是在页面的最上层显示，并允许用户关闭它。

1. 基本模态框

要创建一个基本的模态框，你需要以下几个部分：

  • 触发模态框的按钮或元素。
  • 模态框结构：包含 .modal, .modal-dialog, .modal-content, .modal-header, .modal-body, .modal-footer 等部分。

示例：基本模态框

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch modal
</button>

<!-- 模态框结构 -->
<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">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        This is the content of the modal.
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
  • 触发按钮：按钮通过 data-bs-toggle="modal" 和 data-bs-target="#exampleModal" 来触发模态框。
  • 模态框结构：<div class="modal fade"> 包含模态框的主要结构，其中 fade 用于添加动画效果。
  • 关闭按钮：<button type="button" class="btn-close" data-bs-dismiss="modal"> 用于关闭模态框。
  • 模态框头部、主体、底部：使用 .modal-header, .modal-body, .modal-footer 来定义模态框的不同部分。

2. 模态框的动态操作

你可以通过 JavaScript 控制模态框的显示与隐藏，Bootstrap 提供了几种方法来操作模态框：

  • 打开模态框：modal.show()
  • 关闭模态框：modal.hide()
  • 切换模态框的显示/隐藏状态：modal.toggle()

示例：使用 JavaScript 控制模态框

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" id="openModal">
  Open Modal with JS
</button>

<!-- 模态框结构 -->
<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">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is the content of the modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
  var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));

  document.getElementById('openModal').addEventListener('click', function () {
    myModal.show();
  });
</script>
  • myModal.show()：显示模态框。
  • myModal.hide()：隐藏模态框。
  • myModal.toggle()：切换模态框的显示/隐藏状态。

3. 模态框的大小

你可以通过添加 .modal-sm, .modal-lg 或 .modal-dialog-centered 类来控制模态框的大小和位置。

示例：小模态框

<div class="modal-dialog modal-sm">
  <!-- 模态框内容 -->
</div>

示例：大模态框

<div class="modal-dialog modal-lg">
  <!-- 模态框内容 -->
</div>

示例：居中模态框

<div class="modal-dialog modal-dialog-centered">
  <!-- 模态框内容 -->
</div>

4. 模态框的滚动

如果模态框的内容较多，可以通过 .modal-dialog-scrollable 类使模态框的主体部分可滚动。

示例：可滚动的模态框

<div class="modal-dialog modal-dialog-scrollable">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Scrollable Modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <!-- 长内容 -->
      <p>This is a very long modal body content that will be scrollable...</p>
      <!-- 更多内容 -->
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>

5. 模态框的动画

Bootstrap 5 在模态框中使用了 fade 类来添加渐显动画。如果希望移除动画效果，可以省略 fade 类。

示例：没有动画的模态框

<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <!-- 模态框内容 -->
</div>

6. 通过键盘关闭模态框

Bootstrap 5 默认允许用户通过按 Esc 键关闭模态框。如果你不希望允许通过键盘关闭模态框，可以使用 keyboard: false 配置。

示例：禁止按 Esc 键关闭模态框

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
  keyboard: false
});

总结

  • .modal：模态框的根容器。
  • .modal-dialog：模态框对话框容器。
  • .modal-content：模态框的具体内容区域。
  • .modal-header：模态框的标题区域。
  • .modal-body：模态框的内容区域。
  • .modal-footer：模态框的底部操作区域。
  • data-bs-toggle="modal" 和 data-bs-target：用于触发模态框的显示。
  • modal.show(), modal.hide(), modal.toggle()：控制模态框的显示和隐藏。

通过这些类和配置，你可以创建功能丰富且响应迅速的模态框，提升用户体验。