在 Bootstrap 4 中，模态框（Modal） 是一种弹出式窗口，常用于显示额外的内容，比如警告框、表单、提示等。模态框可以在页面的任何位置显示，通常会遮盖住页面的其他内容，直到用户关闭它。

1. 基本的模态框

模态框的结构由一个包含 modal-dialog 和 modal-content 的容器组成。以下是一个简单的模态框示例：

示例：

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch Modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

解释：

  • modal：这是整个模态框的容器。fade 类为模态框提供淡入淡出的动画效果。
  • modal-dialog：模态框的对话框容器，定义了模态框的大小。
  • modal-content：模态框的内容区域。
  • modal-header、modal-body 和 modal-footer：分别用于模态框的头部、主体和底部内容。
  • close：关闭按钮，点击时关闭模态框。

2. 自定义大小的模态框

Bootstrap 提供了多种大小类来控制模态框的大小。你可以通过添加以下类来调整模态框的宽度：

  • modal-sm：小模态框。
  • modal-lg：大模态框。
  • modal-xl：超大模态框。

示例：大模态框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <!-- 内容 -->
    </div>
  </div>
</div>

示例：小模态框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <!-- 内容 -->
    </div>
  </div>
</div>

3. 模态框的打开和关闭

模态框通过 JavaScript 控制打开和关闭。你可以通过点击触发按钮或其他交互元素来打开模态框，也可以使用 JavaScript 手动打开或关闭模态框。

打开模态框（JavaScript）

<script>
  $('#myModal').modal('show');
</script>

关闭模态框（JavaScript）

<script>
  $('#myModal').modal('hide');
</script>

你也可以使用 data-dismiss="modal" 属性在关闭按钮上触发模态框的关闭。

4. 模态框的动画效果

Bootstrap 4 中的模态框使用 fade 类提供淡入淡出动画效果，模态框在打开时会从透明逐渐变为不透明，关闭时会反转。

示例：带动画的模态框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 内容 -->
    </div>
  </div>
</div>

5. 模态框的滚动效果

如果模态框中的内容较多，超过了屏幕的高度，默认情况下模态框的内容区域会有一个滚动条。你可以通过以下类让模态框的主体部分具有滚动效果：

  • modal-dialog-scrollable：使模态框主体区域可以滚动。

示例：可滚动的模态框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 内容，这部分会出现滚动条 -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

6. 模态框的背景遮罩层

当模态框打开时，背景会被一个半透明的遮罩层遮盖。用户点击遮罩层也可以关闭模态框。你可以通过设置 data-backdrop 属性来控制遮罩层的行为：

  • data-backdrop="static"：禁用点击遮罩层关闭模态框。
  • data-backdrop="true"（默认值）：允许点击遮罩层关闭模态框。
  • data-backdrop="false"：禁用背景遮罩层。

示例：禁用点击背景关闭模态框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 内容 -->
    </div>
  </div>
</div>

示例：不显示背景遮罩层

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 内容 -->
    </div>
  </div>
</div>

7. 模态框的键盘操作

你可以通过 data-keyboard="false" 属性禁用键盘操作，防止用户按 Esc 键关闭模态框。

示例：禁用 Esc 键关闭模态框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 内容 -->
    </div>
  </div>
</div>

8. 模态框的事件

Bootstrap 4 提供了几个事件，可以帮助你在模态框的打开、关闭或销毁时执行特定的操作：

  • show.bs.modal：模态框显示时触发。
  • shown.bs.modal：模态框完全显示时触发。
  • hide.bs.modal：模态框隐藏时触发。
  • hidden.bs.modal：模态框完全隐藏时触发。

示例：监听事件

<script>
  $('#myModal').on('show.bs.modal', function (e) {
    console.log('Modal is about to be shown');
  });

  $('#myModal').on('hidden.bs.modal', function (e) {
    console.log('Modal has been hidden');
  });
</script>

总结

  • 模态框的基本结构：包括 .modal, .modal-dialog, .modal-content 等类。
  • 控制模态框显示和隐藏：通过 data-toggle="modal", data-target="#myModal" 等属性，或使用 JavaScript $('#myModal').modal('show')。
  • 自定义大小：使用 .modal-sm, .modal-lg, .modal-xl 类。
  • 滚动效果：使用 .modal-dialog-scrollable 类。
  • 遮罩层与背景点击：使用 data-backdrop 属性控制。
  • 禁用键盘操作：使用 data-keyboard="false" 禁用 Esc 键。

通过这些设置，你可以根据需要定制一个功能丰富的模态框组件。