如何使用 bootstrap 创建模态框？创建一个具有适当 html 结构的模态框。包含 bootstrap 和 jquery 库以启用模态功能。使用 javascript 或 jquery 代码显示或隐藏模态框。
如何使用 Bootstrap 创建模态框
引言
Bootstrap 提供了一个简单的 API 来创建交互式的模态框，允许你弹出信息、表单或其他内容，而无需重新加载页面。
创建模态框
- 添加基本 HTML:
<code class="html"><div class="modal" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">模态框标题</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></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></code>- 包含 Bootstrap 和 jQuery:
确保你在 HTML 页面中包含 Bootstrap 和 jQuery 库：
<code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script></code>
打开和关闭模态框
使用 JavaScript 或 jQuery 代码来显示或隐藏模态框：
显示模态框：
<code class="javascript">$('#myModal').modal('show');</code>隐藏模态框：
<code class="javascript">$('#myModal').modal('hide');</code>其他选项
Bootstrap 模态框还提供各种其他选项，如：
- 键盘事件：设置键盘快捷键来打开和关闭模态框。
- 动画：启用或禁用模态框的动画效果。
- 焦点：控制模态框打开时键盘焦点的行为。
- 远程内容加载：从远程 URL 加载模态框的内容。
