Bootstrap 4模态框 - 创建交互式弹出窗口

最后编辑于2025-04-14 12:39:35.9705076 +0800 CST

Bootstrap 4 模态框

模态框（Modal）是覆盖在父窗体上的子窗体。它通常用于显示需要用户注意的重要信息或需要用户进行交互的内容，而无需离开当前页面。模态框在网站中常用于登录/注册表单、确认对话框、图片预览等场景。

基本模态框

以下实例创建了一个简单的模态框效果：

html 
 1<!-- 按钮：用于打开模态框 -->
 2<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
 3  打开模态框
 4</button>
 5 
 6<!-- 模态框 -->
 7<div class="modal fade" id="myModal">
 8  <div class="modal-dialog">
 9    <div class="modal-content">
10 
11      <!-- 模态框头部 -->
12      <div class="modal-header">
13        <h4 class="modal-title">模态框头部</h4>
14        <button type="button" class="close" data-dismiss="modal">&times;</button>
15      </div>
16 
17      <!-- 模态框主体 -->
18      <div class="modal-body">
19        模态框内容..
20      </div>
21 
22      <!-- 模态框底部 -->
23      <div class="modal-footer">
24        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
25      </div>
26 
27    </div>
28  </div>
29</div>

模态框的组件说明

  • modal: 创建模态框的主容器
  • modal-dialog: 设置模态框的正确宽度和边距
  • modal-content: 容纳模态框的实际内容
  • modal-header: 模态框的标题部分，通常包含标题和关闭按钮
  • modal-body: 模态框的主体部分，包含主要内容
  • modal-footer: 模态框的底部，通常包含操作按钮

模态框尺寸

Bootstrap 4提供了三种不同尺寸的模态框。我们可以通过添加以下类来控制模态框大小：

  • .modal-sm - 小模态框
  • .modal-lg - 大模态框
  • .modal-xl - 超大模态框 (Bootstrap 4.3+)

这些尺寸类应添加到 .modal-dialog 类之后：

小模态框

html 
1<div class="modal-dialog modal-sm">
2  <!-- 内容 -->
3</div>

大模态框

html 
1<div class="modal-dialog modal-lg">
2  <!-- 内容 -->
3</div>

超大模态框 (Bootstrap 4.3+)

html 
1<div class="modal-dialog modal-xl">
2  <!-- 内容 -->
3</div>

垂直居中模态框

默认情况下，模态框位于页面顶部。通过添加 .modal-dialog-centered 类，可以使模态框在页面中垂直居中显示：

html 
1<div class="modal-dialog modal-dialog-centered">
2  <!-- 内容 -->
3</div>

模态框动画效果

Bootstrap 4的模态框默认带有淡入淡出效果（通过 .fade 类实现）。如果你不想要这个效果，只需移除 .fade 类。

使用JavaScript触发模态框

除了使用按钮的 data-toggle 和 data-target 属性外，还可以使用JavaScript来手动控制模态框：

javascript 
1// 显示模态框
2$('#myModal').modal('show');
3
4// 隐藏模态框
5$('#myModal').modal('hide');
6
7// 切换模态框状态
8$('#myModal').modal('toggle');

模态框事件

Bootstrap 4的模态框提供了多种事件，可用于在不同阶段执行代码：

javascript 
 1// 模态框显示前触发
 2$('#myModal').on('show.bs.modal', function (e) {
 3  console.log('模态框即将显示');
 4});
 5
 6// 模态框完全显示后触发
 7$('#myModal').on('shown.bs.modal', function (e) {
 8  console.log('模态框已显示');
 9});
10
11// 模态框隐藏前触发
12$('#myModal').on('hide.bs.modal', function (e) {
13  console.log('模态框即将隐藏');
14});
15
16// 模态框完全隐藏后触发
17$('#myModal').on('hidden.bs.modal', function (e) {
18  console.log('模态框已隐藏');
19});

实用技巧

阻止模态框关闭

有时候我们需要在特定条件下阻止模态框关闭，例如表单验证失败时：

javascript 
1$('#myModal').on('hide.bs.modal', function (e) {
2  // 检查是否应该阻止关闭
3  if ($('#preventClose').prop('checked')) {
4    e.preventDefault();
5    alert('请先完成操作再关闭');
6  }
7});

在模态框内加载远程内容

通过Ajax可以在模态框中加载远程内容：

javascript 
1$('#myModal').on('show.bs.modal', function (e) {
2  $(this).find('.modal-body').load('remote-content.html');
3});

模态框中的表单提交

在模态框中使用表单时，可以结合Ajax进行无刷新提交：

javascript 
 1$('#modalForm').on('submit', function(e) {
 2  e.preventDefault();
 3  $.ajax({
 4    url: 'process.php',
 5    type: 'post',
 6    data: $(this).serialize(),
 7    success: function(response) {
 8      $('#myModal').modal('hide');
 9      // 处理成功响应
10    }
11  });
12});

注意事项

  1. 避免在页面上创建过多的模态框，这可能会影响性能
  2. 模态框内的表单提交应考虑用户体验，尽量避免刷新页面
  3. 确保模态框的内容对移动设备友好，测试不同屏幕尺寸下的显示效果
  4. 使用 data-backdrop="static" 可以防止点击背景关闭模态框
  5. 使用 data-keyboard="false" 可以防止按ESC键关闭模态框