要使用
Bootstrap 5
实现模态框，可以按照以下步骤进行：
1. 添加
Bootstrap 5 的 CSS 和 JS 文件到你的 HTML 页面
中，可以通过 CDN 引入，也可以下载到本地引入。
```html
<!-- 引入
Bootstrap 5 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
bootstrap@5.1.0/dist/css/
bootstrap.min.css">
<!-- 引入
Bootstrap 5 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/
bootstrap@5.1.0/dist/js/
bootstrap.bundle.min.js"></script>
```
2. 在 HTML
中编写
模态框的结构，可以参考以下示例
代码：
```html
<!--
模态框的触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">打开
模态框</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">
模态框标题</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
模态框内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
```
3. 在
模态框触发按钮
中添加 `data-bs-toggle="modal"` 和 `data-bs-target="#exampleModal"` 属性，表示该按钮用于触发
模态框的显示，并指定要显示的
模态框的 ID。
4. 在
模态框结构
中添加 `class="modal fade"` 属性，表示该结构是一个
模态框，并默认隐藏。同时，指定该
模态框的 ID 和其他相关属性。
5. 在
模态框结构
中添加
模态框的头部、主体和尾部，分别使用 `class="modal-header"`、`class="modal-body"` 和 `class="modal-footer"` 属性表示。可以在头部
中添加
模态框的标题和关闭按钮，主体
中添加
模态框的内容，尾部
中添加操作按钮。
6. 最后，在
模态框结构
中添加 `data-bs-dismiss="modal"` 属性的按钮，可以在点击该按钮时关闭
模态框。
通过以上步骤，就可以使用
Bootstrap 5
实现一个简单的
模态框了。
本文介绍了在Bootstrap中实现嵌套模态框的解决方案，包括HTML和JS代码示例，以及解决遮罩层和z-index问题的方法。通过设置模态框的z-index和调整遮罩层显示，成功在已有的模态框上弹出新的模态框。
最低0.47元/天 解锁文章
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
