Bootstrap4模态框组件使用完全手册从基础配置到高级自定义全面掌握网页弹窗设计技巧解决实际开发中遇到的各种问题提升用户体验

威震华夏关云长

引言

模态框（Modal）是现代网页设计中不可或缺的UI组件，它能够在不离开当前页面的情况下显示额外信息、表单或确认对话框。Bootstrap 4作为最受欢迎的前端框架之一，提供了强大而灵活的模态框组件，使开发者能够轻松创建美观且功能丰富的弹窗。本文将全面介绍Bootstrap 4模态框的使用方法，从基础配置到高级自定义，帮助你解决实际开发中遇到的各种问题，并提升用户体验。

Bootstrap 4模态框基础配置

创建基本模态框

Bootstrap 4模态框的基本结构由HTML、CSS和JavaScript组成。下面是一个最基本的模态框示例：

2. <!-- 触发按钮 -->
3. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicModal">
4.   打开基本模态框
5. </button>
7. <!-- 模态框 -->
8. <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel" aria-hidden="true">
9.   <div class="modal-dialog" role="document">
10.     <div class="modal-content">
11.       <div class="modal-header">
12.         <h5 class="modal-title" id="basicModalLabel">模态框标题</h5>
13.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
14.           <span aria-hidden="true">&times;</span>
15.         </button>
16.       </div>
17.       <div class="modal-body">
18.         这里是模态框的内容区域。
19.       </div>
20.       <div class="modal-footer">
21.         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
22.         <button type="button" class="btn btn-primary">保存更改</button>
23.       </div>
24.     </div>
25.   </div>
26. </div>

复制代码

这个基本模态框包含了所有必要的元素：

• 触发按钮：使用data-toggle="modal"和data-target属性来指定要打开的模态框
• 模态框容器：使用.modal类，并添加.fade类实现淡入淡出效果
• 模态框对话框：使用.modal-dialog类
• 模态框内容：使用.modal-content类
• 模态框头部、主体和底部：分别使用.modal-header、.modal-body和.modal-footer类

必要的依赖

要使用Bootstrap 4模态框，需要确保页面中引入了以下依赖：

2. <!-- Bootstrap CSS -->
3. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
5. <!-- jQuery -->
6. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
8. <!-- Popper.js -->
9. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
11. <!-- Bootstrap JS -->
12. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

复制代码

模态框的组成部分详解

模态框头部（Modal Header）

模态框头部通常包含标题和关闭按钮：

2. <div class="modal-header">
3.   <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
4.   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5.     <span aria-hidden="true">&times;</span>
6.   </button>
7. </div>

复制代码

• .modal-title：用于设置模态框标题的样式
• .close：用于关闭按钮的样式
• data-dismiss="modal"：点击该元素会关闭模态框

模态框主体（Modal Body）

模态框主体是内容的主要区域，可以包含任何HTML内容：

2. <div class="modal-body">
3.   <p>这里可以放置文本、表单、图片等任何HTML内容。</p>
4.   <form>
5.     <div class="form-group">
6.       <label for="recipient-name" class="col-form-label">收件人:</label>
7.       <input type="text" class="form-control" id="recipient-name">
8.     </div>
9.     <div class="form-group">
10.       <label for="message-text" class="col-form-label">消息:</label>
11.       <textarea class="form-control" id="message-text"></textarea>
12.     </div>
13.   </form>
14. </div>

复制代码

模态框底部（Modal Footer）

模态框底部通常包含操作按钮：

2. <div class="modal-footer">
3.   <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
4.   <button type="button" class="btn btn-primary">发送消息</button>
5. </div>

复制代码

模态框尺寸和变体

不同尺寸的模态框

Bootstrap 4提供了三种预设尺寸的模态框：小、默认和大：

2. <!-- 小模态框 -->
3. <div class="modal-dialog modal-sm">...</div>
5. <!-- 默认模态框 -->
6. <div class="modal-dialog">...</div>
8. <!-- 大模态框 -->
9. <div class="modal-dialog modal-lg">...</div>
11. <!-- 超大模态框 -->
12. <div class="modal-dialog modal-xl">...</div>

复制代码

全屏模态框

Bootstrap 4.2+支持全屏模态框：

2. <!-- 全屏模态框 -->
3. <div class="modal-dialog modal-fullscreen">...</div>
5. <!-- 可调整的全屏模态框（在特定断点以下全屏） -->
6. <div class="modal-dialog modal-fullscreen-sm-down">...</div>
7. <div class="modal-dialog modal-fullscreen-md-down">...</div>
8. <div class="modal-dialog modal-fullscreen-lg-down">...</div>
9. <div class="modal-dialog modal-fullscreen-xl-down">...</div>

复制代码

居中模态框

要使模态框垂直居中，只需在.modal-dialog上添加.modal-dialog-centered类：

2. <div class="modal-dialog modal-dialog-centered">...</div>

复制代码

滚动长内容

当模态框内容过长时，可以启用滚动功能：

2. <!-- 可滚动的模态框 -->
3. <div class="modal-dialog modal-dialog-scrollable">...</div>

复制代码

模态框选项和配置

通过数据属性配置

Bootstrap 4允许通过HTML5数据属性（data attributes）来配置模态框：

2. <div class="modal fade" id="optionsModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="optionsModalLabel" aria-hidden="true">
3.   ...
4. </div>

复制代码

常用数据属性：

• data-backdrop：设置为static时，点击模态框背景不会关闭模态框；设置为false时，不显示背景
• data-keyboard：设置为false时，按ESC键不会关闭模态框
• data-focus：设置为true时，模态框初始化时自动聚焦
• data-show：设置为false时，模态框初始化时不显示

通过JavaScript配置

也可以通过JavaScript来配置模态框：

2. $('#optionsModal').modal({
3.   backdrop: 'static',
4.   keyboard: false,
5.   focus: true,
6.   show: false
7. });

复制代码

模态框事件处理

Bootstrap 4模态框提供了多个事件，允许你在模态框显示和隐藏的不同阶段执行自定义代码：

2. $('#eventsModal').on('show.bs.modal', function (e) {
3.   // 在模态框显示之前触发
4.   console.log('模态框即将显示');
5. });
7. $('#eventsModal').on('shown.bs.modal', function (e) {
8.   // 在模态框显示之后触发（等待CSS过渡完成）
9.   console.log('模态框已显示');
10. });
12. $('#eventsModal').on('hide.bs.modal', function (e) {
13.   // 在模态框隐藏之前触发
14.   console.log('模态框即将隐藏');
15. });
17. $('#eventsModal').on('hidden.bs.modal', function (e) {
18.   // 在模态框隐藏之后触发（等待CSS过渡完成）
19.   console.log('模态框已隐藏');
20. });
22. $('#eventsModal').on('hidePrevented.bs.modal', function (e) {
23.   // 当模态框尝试隐藏但被阻止时触发（例如，当backdrop设置为static时）
24.   console.log('模态框隐藏被阻止');
25. });

复制代码

模态框方法调用

Bootstrap 4提供了几种方法来控制模态框的行为：

2. // 显示模态框
3. $('#methodsModal').modal('show');
5. // 隐藏模态框
6. $('#methodsModal').modal('hide');
8. // 切换模态框的显示状态
9. $('#methodsModal').modal('toggle');
11. // 处理模态框实例
12. var modalInstance = $('#methodsModal').modal('getInstance');  // 返回模态框的实例
13. var modalInstance = $('#methodsModal').modal('getInstance'); // 如果实例不存在，则创建一个新的实例

复制代码

高级自定义技巧

动态加载内容

有时我们需要在模态框中动态加载内容，可以通过AJAX实现：

2. $('#dynamicContentModal').on('show.bs.modal', function (e) {
3.   var modal = $(this);
4.   // 加载远程内容
5.   $.get('remote-content.html', function (data) {
6.     modal.find('.modal-body').html(data);
7.   });
8. });

复制代码

表单验证

在模态框中实现表单验证：

2. <div class="modal fade" id="formValidationModal" tabindex="-1" role="dialog" aria-labelledby="formValidationModalLabel" aria-hidden="true">
3.   <div class="modal-dialog" role="document">
4.     <div class="modal-content">
5.       <div class="modal-header">
6.         <h5 class="modal-title" id="formValidationModalLabel">表单验证示例</h5>
7.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8.           <span aria-hidden="true">&times;</span>
9.         </button>
10.       </div>
11.       <div class="modal-body">
12.         <form id="validationForm" novalidate>
13.           <div class="form-group">
14.             <label for="username">用户名</label>
15.             <input type="text" class="form-control" id="username" required>
16.             <div class="invalid-feedback">
17.               请输入用户名。
18.             </div>
19.           </div>
20.           <div class="form-group">
21.             <label for="email">电子邮件</label>
22.             <input type="email" class="form-control" id="email" required>
23.             <div class="invalid-feedback">
24.               请输入有效的电子邮件地址。
25.             </div>
26.           </div>
27.         </form>
28.       </div>
29.       <div class="modal-footer">
30.         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
31.         <button type="button" class="btn btn-primary" id="submitForm">提交</button>
32.       </div>
33.     </div>
34.   </div>
35. </div>
37. <script>
38.   $(document).ready(function() {
39.     $('#submitForm').click(function() {
40.       var form = document.getElementById('validationForm');
41.       
42.       if (form.checkValidity() === false) {
43.         event.preventDefault();
44.         event.stopPropagation();
45.       }
46.       
47.       form.classList.add('was-validated');
48.       
49.       if (form.checkValidity() === true) {
50.         // 表单验证通过，可以提交数据
51.         alert('表单验证通过！');
52.         $('#formValidationModal').modal('hide');
53.       }
54.     });
55.   });
56. </script>

复制代码

模态框嵌套

虽然不推荐，但在某些情况下可能需要嵌套模态框：

2. <!-- 主模态框 -->
3. <div class="modal fade" id="mainModal" tabindex="-1" role="dialog" aria-labelledby="mainModalLabel" aria-hidden="true">
4.   <div class="modal-dialog" role="document">
5.     <div class="modal-content">
6.       <div class="modal-header">
7.         <h5 class="modal-title" id="mainModalLabel">主模态框</h5>
8.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
9.           <span aria-hidden="true">&times;</span>
10.         </button>
11.       </div>
12.       <div class="modal-body">
13.         <p>这是主模态框的内容。</p>
14.         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nestedModal">
15.           打开嵌套模态框
16.         </button>
17.       </div>
18.       <div class="modal-footer">
19.         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
20.       </div>
21.     </div>
22.   </div>
23. </div>
25. <!-- 嵌套模态框 -->
26. <div class="modal fade" id="nestedModal" tabindex="-1" role="dialog" aria-labelledby="nestedModalLabel" aria-hidden="true">
27.   <div class="modal-dialog" role="document">
28.     <div class="modal-content">
29.       <div class="modal-header">
30.         <h5 class="modal-title" id="nestedModalLabel">嵌套模态框</h5>
31.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
32.           <span aria-hidden="true">&times;</span>
33.         </button>
34.       </div>
35.       <div class="modal-body">
36.         <p>这是嵌套模态框的内容。</p>
37.       </div>
38.       <div class="modal-footer">
39.         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
40.       </div>
41.     </div>
42.   </div>
43. </div>

复制代码

自定义动画

可以通过覆盖CSS来实现自定义动画效果：

2. /* 自定义模态框动画 */
3. .custom-modal .modal-dialog {
4.   transition: transform 0.3s ease-out;
5.   transform: translate(0, -50px);
6. }
8. .custom-modal.show .modal-dialog {
9.   transform: translate(0, 0);
10. }
12. /* 自定义背景淡入效果 */
13. .custom-modal .modal-backdrop {
14.   transition: opacity 0.3s ease-out;
15.   opacity: 0;
16. }
18. .custom-modal.show .modal-backdrop {
19.   opacity: 0.5;
20. }

复制代码

实际开发中的问题解决方案

模态框中的视频自动播放

在模态框中嵌入视频并实现自动播放：

2. <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
3.   <div class="modal-dialog modal-lg" role="document">
4.     <div class="modal-content">
5.       <div class="modal-header">
6.         <h5 class="modal-title" id="videoModalLabel">视频播放</h5>
7.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8.           <span aria-hidden="true">&times;</span>
9.         </button>
10.       </div>
11.       <div class="modal-body">
12.         <div class="embed-responsive embed-responsive-16by9">
13.           <iframe class="embed-responsive-item" src="" id="videoFrame" allowscriptaccess="always" allow="autoplay"></iframe>
14.         </div>
15.       </div>
16.     </div>
17.   </div>
18. </div>
20. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1">
21.   播放视频
22. </button>
24. <script>
25.   $('#videoModal').on('show.bs.modal', function (e) {
26.     var button = $(e.relatedTarget); // 触发模态框的按钮
27.     var videoUrl = button.data('video'); // 从data-video属性获取视频URL
28.     var modal = $(this);
29.     modal.find('#videoFrame').attr('src', videoUrl);
30.   });
32.   $('#videoModal').on('hidden.bs.modal', function (e) {
33.     var modal = $(this);
34.     modal.find('#videoFrame').attr('src', ''); // 清空视频URL以停止播放
35.   });
36. </script>

复制代码

解决模态框与z-index冲突

当页面中有多个使用z-index的元素时，可能会出现模态框被其他元素遮挡的问题：

2. /* 确保模态框在最顶层 */
3. .modal {
4.   z-index: 1050 !important;
5. }
7. .modal-backdrop {
8.   z-index: 1040 !important;
9. }
11. /* 如果有其他元素需要调整 */
12. .other-high-z-index-element {
13.   z-index: 1030;
14. }

复制代码

模态框中的表单提交处理

处理模态框中的表单提交并更新页面内容：

2. <div class="modal fade" id="formSubmitModal" tabindex="-1" role="dialog" aria-labelledby="formSubmitModalLabel" aria-hidden="true">
3.   <div class="modal-dialog" role="document">
4.     <div class="modal-content">
5.       <div class="modal-header">
6.         <h5 class="modal-title" id="formSubmitModalLabel">添加用户</h5>
7.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8.           <span aria-hidden="true">&times;</span>
9.         </button>
10.       </div>
11.       <div class="modal-body">
12.         <form id="userForm">
13.           <div class="form-group">
14.             <label for="userName">姓名</label>
15.             <input type="text" class="form-control" id="userName" required>
16.           </div>
17.           <div class="form-group">
18.             <label for="userEmail">电子邮件</label>
19.             <input type="email" class="form-control" id="userEmail" required>
20.           </div>
21.         </form>
22.       </div>
23.       <div class="modal-footer">
24.         <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
25.         <button type="button" class="btn btn-primary" id="saveUser">保存</button>
26.       </div>
27.     </div>
28.   </div>
29. </div>
31. <div class="container mt-4">
32.   <h2>用户列表</h2>
33.   <button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#formSubmitModal">
34.     添加新用户
35.   </button>
36.   <table class="table table-bordered">
37.     <thead>
38.       <tr>
39.         <th>ID</th>
40.         <th>姓名</th>
41.         <th>电子邮件</th>
42.       </tr>
43.     </thead>
44.     <tbody id="userTableBody">
45.       <tr>
46.         <td>1</td>
47.         <td>张三</td>
48.         <td>zhangsan@example.com</td>
49.       </tr>
50.       <tr>
51.         <td>2</td>
52.         <td>李四</td>
53.         <td>lisi@example.com</td>
54.       </tr>
55.     </tbody>
56.   </table>
57. </div>
59. <script>
60.   $(document).ready(function() {
61.     var userIdCounter = 3; // 用于生成新用户ID
62.    
63.     $('#saveUser').click(function() {
64.       var name = $('#userName').val();
65.       var email = $('#userEmail').val();
66.       
67.       if (name && email) {
68.         // 创建新的表格行
69.         var newRow = '<tr>' +
70.           '<td>' + userIdCounter + '</td>' +
71.           '<td>' + name + '</td>' +
72.           '<td>' + email + '</td>' +
73.           '</tr>';
74.         
75.         // 添加到表格中
76.         $('#userTableBody').append(newRow);
77.         
78.         // 重置表单
79.         $('#userForm')[0].reset();
80.         
81.         // 关闭模态框
82.         $('#formSubmitModal').modal('hide');
83.         
84.         // 增加ID计数器
85.         userIdCounter++;
86.         
87.         // 显示成功消息
88.         alert('用户添加成功！');
89.       } else {
90.         alert('请填写所有必填字段！');
91.       }
92.     });
93.   });
94. </script>

复制代码

模态框中的图片画廊

创建一个图片画廊模态框：

2. <div class="container mt-4">
3.   <h2>图片画廊</h2>
4.   <div class="row">
5.     <div class="col-md-4 mb-4">
6.       <img src="https://picsum.photos/seed/img1/300/200.jpg" class="img-fluid gallery-img" data-toggle="modal" data-target="#imageGalleryModal" data-img-src="https://io.pixtech.org/pixtech/forum/202509/25/9de120f89b7645c3.webp" data-img-title="图片 1">
7.     </div>
8.     <div class="col-md-4 mb-4">
9.       <img src="https://picsum.photos/seed/img2/300/200.jpg" class="img-fluid gallery-img" data-toggle="modal" data-target="#imageGalleryModal" data-img-src="https://io.pixtech.org/pixtech/forum/202509/25/ab13bdcc51ac4f00.webp" data-img-title="图片 2">
10.     </div>
11.     <div class="col-md-4 mb-4">
12.       <img src="https://picsum.photos/seed/img3/300/200.jpg" class="img-fluid gallery-img" data-toggle="modal" data-target="#imageGalleryModal" data-img-src="https://io.pixtech.org/pixtech/forum/202509/25/5ed794f5e8d7460a.webp" data-img-title="图片 3">
13.     </div>
14.   </div>
15. </div>
17. <!-- 图片画廊模态框 -->
18. <div class="modal fade" id="imageGalleryModal" tabindex="-1" role="dialog" aria-labelledby="imageGalleryModalLabel" aria-hidden="true">
19.   <div class="modal-dialog modal-lg" role="document">
20.     <div class="modal-content">
21.       <div class="modal-header">
22.         <h5 class="modal-title" id="imageGalleryModalLabel">图片预览</h5>
23.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
24.           <span aria-hidden="true">&times;</span>
25.         </button>
26.       </div>
27.       <div class="modal-body text-center">
28.         <img src="" id="modalImage" class="img-fluid" alt="预览图片">
29.         <p class="mt-3" id="modalImageTitle"></p>
30.       </div>
31.       <div class="modal-footer">
32.         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
33.       </div>
34.     </div>
35.   </div>
36. </div>
38. <script>
39.   $('#imageGalleryModal').on('show.bs.modal', function (e) {
40.     var button = $(e.relatedTarget); // 触发模态框的图片
41.     var imgSrc = button.data('img-src'); // 获取大图URL
42.     var imgTitle = button.data('img-title'); // 获取图片标题
43.    
44.     var modal = $(this);
45.     modal.find('#modalImage').attr('src', imgSrc);
46.     modal.find('#modalImageTitle').text(imgTitle);
47.   });
48. </script>

复制代码

提升用户体验的最佳实践

响应式设计

确保模态框在不同设备上都有良好的显示效果：

2. <div class="modal fade" id="responsiveModal" tabindex="-1" role="dialog" aria-labelledby="responsiveModalLabel" aria-hidden="true">
3.   <!-- 在小屏幕上使用全屏模态框 -->
4.   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen-sm-down" role="document">
5.     <div class="modal-content">
6.       <div class="modal-header">
7.         <h5 class="modal-title" id="responsiveModalLabel">响应式模态框</h5>
8.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
9.           <span aria-hidden="true">&times;</span>
10.         </button>
11.       </div>
12.       <div class="modal-body">
13.         <p>这是一个响应式模态框，在小屏幕上会全屏显示，在大屏幕上居中显示。</p>
14.         <!-- 添加更多内容以测试滚动效果 -->
15.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
16.         <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.</p>
17.         <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.</p>
18.       </div>
19.       <div class="modal-footer">
20.         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
21.         <button type="button" class="btn btn-primary">保存更改</button>
22.       </div>
23.     </div>
24.   </div>
25. </div>

复制代码

加载状态

在模态框中显示加载状态，提升用户体验：

2. <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModalLabel" aria-hidden="true">
3.   <div class="modal-dialog modal-dialog-centered" role="document">
4.     <div class="modal-content">
5.       <div class="modal-header">
6.         <h5 class="modal-title" id="loadingModalLabel">处理中</h5>
7.       </div>
8.       <div class="modal-body text-center">
9.         <div class="spinner-border text-primary" role="status">
10.           <span class="sr-only">加载中...</span>
11.         </div>
12.         <p class="mt-3">请稍候，正在处理您的请求...</p>
13.       </div>
14.     </div>
15.   </div>
16. </div>
18. <button type="button" class="btn btn-primary" id="showLoadingModal">显示加载模态框</button>
20. <script>
21.   $('#showLoadingModal').click(function() {
22.     // 显示加载模态框
23.     $('#loadingModal').modal('show');
24.    
25.     // 模拟异步操作
26.     setTimeout(function() {
27.       // 关闭加载模态框
28.       $('#loadingModal').modal('hide');
29.       
30.       // 显示成功消息
31.       alert('操作完成！');
32.     }, 3000); // 3秒后完成
33.   });
34. </script>

复制代码

键盘导航

为模态框添加键盘导航功能，提升可访问性：

2. <div class="modal fade" id="keyboardNavModal" tabindex="-1" role="dialog" aria-labelledby="keyboardNavModalLabel" aria-hidden="true">
3.   <div class="modal-dialog" role="document">
4.     <div class="modal-content">
5.       <div class="modal-header">
6.         <h5 class="modal-title" id="keyboardNavModalLabel">键盘导航示例</h5>
7.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8.           <span aria-hidden="true">&times;</span>
9.         </button>
10.       </div>
11.       <div class="modal-body">
12.         <p>这个模态框支持键盘导航：</p>
13.         <ul>
14.           <li>按 ESC 键关闭模态框</li>
15.           <li>按 Tab 键在元素之间导航</li>
16.           <li>按 Enter 键激活按钮</li>
17.         </ul>
18.         <form>
19.           <div class="form-group">
20.             <label for="keyboardInput">输入框</label>
21.             <input type="text" class="form-control" id="keyboardInput">
22.           </div>
23.         </form>
24.       </div>
25.       <div class="modal-footer">
26.         <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
27.         <button type="button" class="btn btn-primary">确定</button>
28.       </div>
29.     </div>
30.   </div>
31. </div>

复制代码

自动关闭模态框

设置模态框在一定时间后自动关闭：

2. <div class="modal fade" id="autoCloseModal" tabindex="-1" role="dialog" aria-labelledby="autoCloseModalLabel" aria-hidden="true">
3.   <div class="modal-dialog modal-dialog-centered" role="document">
4.     <div class="modal-content">
5.       <div class="modal-header">
6.         <h5 class="modal-title" id="autoCloseModalLabel">自动关闭模态框</h5>
7.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8.           <span aria-hidden="true">&times;</span>
9.         </button>
10.       </div>
11.       <div class="modal-body">
12.         <p>这个模态框将在 <span id="countdown">5</span> 秒后自动关闭。</p>
13.         <div class="progress">
14.           <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
15.         </div>
16.       </div>
17.     </div>
18.   </div>
19. </div>
21. <button type="button" class="btn btn-primary" id="showAutoCloseModal">显示自动关闭模态框</button>
23. <script>
24.   $('#showAutoCloseModal').click(function() {
25.     // 显示模态框
26.     $('#autoCloseModal').modal('show');
27.    
28.     // 设置倒计时
29.     var countdown = 5;
30.     $('#countdown').text(countdown);
31.    
32.     // 设置进度条
33.     var progressBar = $('#progressBar');
34.     progressBar.css('width', '100%');
35.    
36.     // 开始倒计时
37.     var countdownInterval = setInterval(function() {
38.       countdown--;
39.       $('#countdown').text(countdown);
40.       
41.       // 更新进度条
42.       var progressWidth = (countdown / 5) * 100;
43.       progressBar.css('width', progressWidth + '%');
44.       
45.       // 倒计时结束
46.       if (countdown <= 0) {
47.         clearInterval(countdownInterval);
48.         $('#autoCloseModal').modal('hide');
49.       }
50.     }, 1000);
51.   });
52.   
53.   // 如果手动关闭模态框，清除倒计时
54.   $('#autoCloseModal').on('hidden.bs.modal', function (e) {
55.     clearInterval(countdownInterval);
56.   });
57. </script>

复制代码

总结

Bootstrap 4模态框是一个功能强大且灵活的组件，通过本文的详细介绍，你已经掌握了从基础配置到高级自定义的各种技巧。我们学习了如何创建基本模态框、配置不同尺寸和样式、处理事件、调用方法，以及解决实际开发中的常见问题。

通过应用这些知识，你可以创建出用户体验优秀的模态框，提升网页的交互性和功能性。记住，好的模态框设计应该简洁明了，不要过度使用，并且要考虑到可访问性和响应式设计。

希望本文能够帮助你在实际开发中更好地使用Bootstrap 4模态框组件，创造出更加出色的网页应用！