在 Bootstrap 4 中，弹出框（Modals） 是一种常用于显示额外信息、提示或交互界面的组件。它可以通过点击按钮或其他事件触发显示，并且通常会覆盖页面的其他内容，直到用户关闭它。

1. 基础弹出框（Modal）

Bootstrap 的弹出框通过以下几个主要组件组合而成：

  • modal: 弹出框的容器。
  • 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="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        This is the content of the modal.
      </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>

解释：

  • data-toggle="modal"：指定一个元素为触发弹出框的触发器。
  • data-target="#myModal"：指定目标弹出框的 ID。
  • modal fade：fade 类为弹出框提供渐变效果（淡入淡出）。
  • modal-dialog：包含弹出框内容的对话框部分。
  • modal-content：包含标题、主体和底部按钮的部分。
  • modal-header：弹出框的头部部分，通常包含标题和关闭按钮。
  • modal-body：弹出框的主体部分，通常包含实际显示的内容。
  • modal-footer：弹出框的底部部分，通常包含关闭和保存等按钮。

2. 自定义弹出框的大小

你可以通过设置不同的类来改变弹出框的大小：

  • modal-sm：小型弹出框。
  • modal-lg：大型弹出框。
  • modal-xl：超大弹出框。

示例：大型弹出框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <!-- 内容 -->
    </div>
  </div>
</div>

3. 背景遮罩层和关闭操作

默认情况下，弹出框的背景会有一个半透明的遮罩层，你可以点击遮罩层来关闭弹出框。你也可以通过设置属性来禁用或调整遮罩层的行为：

  • data-backdrop="static"：禁用点击背景关闭弹出框。
  • data-backdrop="false"：完全禁用背景遮罩层。

示例：禁用背景点击关闭

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

4. 键盘操作（关闭）

可以通过 data-keyboard="false" 来禁用通过按下 Esc 键关闭弹出框的功能。

示例：禁用 Esc 键关闭

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

5. JavaScript 控制弹出框

你也可以使用 JavaScript 来显示、隐藏或控制弹出框的行为。

显示弹出框

<script>
  // 手动显示弹出框
  $('#myModal').modal('show');
</script>

隐藏弹出框

<script>
  // 手动隐藏弹出框
  $('#myModal').modal('hide');
</script>

切换弹出框

<script>
  // 切换弹出框的显示状态
  $('#myModal').modal('toggle');
</script>

6. 事件监听

你还可以监听弹出框的不同事件，例如 show.bs.modal、shown.bs.modal、hide.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>

7. 滚动弹出框

如果弹出框内容较多，超出了屏幕高度，通常会启用滚动条。你可以通过设置 modal-dialog-scrollable 类让弹出框在内容区域显示滚动条。

示例：可滚动弹出框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Scrollable Modal</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>

总结

  • 弹出框的基础结构：由 .modal, .modal-dialog, .modal-content 等组成。
  • 位置和大小：通过 .modal-sm, .modal-lg, .modal-xl 控制弹出框的大小。
  • 背景遮罩层和键盘操作：可以通过 data-backdrop 和 data-keyboard 属性控制。
  • 显示/隐藏弹出框：可以使用 $('#myModal').modal('show') 来显示，$('#myModal').modal('hide') 来隐藏。
  • 监听事件：可以通过 JavaScript 监听 show.bs.modal, hidden.bs.modal 等事件。
  • 滚动条：通过 .modal-dialog-scrollable 类来启用内容区域的滚动条。

通过这些功能，你可以创建自定义、交互性强的弹出框组件，用于展示更多信息或让用户进行操作。