Bootstrap 模态框

Bootstrap 模态框（Modal）是 Bootstrap 框架中的一个组件，它允许你在一个页面中创建一个模态对话框，用于显示内容、表单、图像或其他信息。模态框通常覆盖在当前页面上，提供了一种不离开当前页面的交互方式。

模态框的基本用法

1. 基础模态框

要创建一个基本的模态框，你需要使用 div 元素来包裹模态框的内容，并为它添加 modal 类。同时，还需要一个触发模态框的按钮，通常使用 data-bs-toggle="modal" 属性来绑定模态框的 ID。

<!-- 模态框的触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开模态框
</button><!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="myModalLabel">模态框标题</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">这里是模态框的内容。</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>

2. 自定义模态框

模态框可以自定义样式和内容。以下是一个自定义模态框的示例：

<!-- 模态框的触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#customModal">打开自定义模态框
</button><!-- 自定义模态框（Modal） -->
<div class="modal fade" id="customModal" tabindex="-1" aria-labelledby="customModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="customModalLabel">自定义模态框标题</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>这里是自定义模态框的内容。</p><form><!-- 表单内容 --></form></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>

模态框的属性

Bootstrap 模态框支持多种属性，以下是一些常用的属性：

data-bs-backdrop: 控制模态框背景的显示方式，可选值有 static（固定背景）、false（不显示背景）、true（显示背景）。
data-bs-keyboard: 控制是否可以通过按 Esc 键关闭模态框，可选值有 true（允许）、false（不允许）。
data-bs-focus: 控制模态框打开时，是否将焦点自动移动到模态框内的第一个元素，可选值有 true（允许）、false（不允许）。