5.3 Bootstrap 模态框(Modal)插件

**Bootstrap 模态框 (Modal) 插件**

Bootstrap 是一个流行的前端框架，提供了许多实用的组件和插件来帮助开发者快速构建响应式网页。其中，模态框 (Modal) 插件是 Bootstrap 提供的一个非常有用的工具，可以用来显示信息、提示用户或展示内容，而不影响页面的其余部分。

**什么是模态框 (Modal)?**

模态框是一种弹出窗口，它可以覆盖整个屏幕，显示特定的内容。它通常用于提示用户、显示错误信息、展示图片或视频等。在 Bootstrap 中，模态框被称为 Modal。

**Bootstrap 模态框的基本结构**

一个基本的 Bootstrap 模态框由以下组成部分组成：

* **.modal**:这是模态框的容器元素。
* **.modal-dialog**:这是模态框的对话框元素，包含了模态框的内容。
* **.modal-content**:这是模态框的内容区域。
* **.modal-header**:这是模态框的头部区域，通常用于显示标题和关闭按钮。
* **.modal-body**:这是模态框的主体区域，用于显示主要内容。
* **.modal-footer**:这是模态框的底部区域，用于显示操作按钮。

**Bootstrap 模态框的基本用法**

要使用 Bootstrap 模态框，只需在 HTML 文件中添加以下代码：

html<!-- 模态框容器 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
 <!-- 模态框对话框 -->
 <div class="modal-dialog" role="document">
 <!-- 模态框内容区域 -->
 <div class="modal-content">
 <!-- 模态框头部区域 -->
 <div class="modal-header">
 <h5 class="modal-title">模态框标题</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <!-- 模态框主体区域 -->
 <div class="modal-body">
 <p>模态框内容...</p>
 </div>
 <!-- 模态框底部区域 -->
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">确定</button>
 </div>
 </div>
 </div>
</div>

**Bootstrap 模态框的事件**

Bootstrap 模态框支持以下事件：

* **show.bs.modal**:模态框显示时触发。
* **shown.bs.modal**:模态框显示完成时触发。
* **hide.bs.modal**:模态框隐藏时触发。
* **hidden.bs.modal**:模态框隐藏完成时触发。

**Bootstrap 模态框的方法**

Bootstrap 模态框支持以下方法：

* **show()**:显示模态框。
* **hide()**:隐藏模态框。
* **toggle()**:切换模态框的显示状态。

**示例代码**

html<!-- HTML -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title">模态框标题</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="modal-body">
 <p>模态框内容...</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary" onclick="alert('确定')">确定</button>
 </div>
 </div>
 </div>
</div>

<!-- JavaScript -->
<script>
 // 显示模态框 $('#myModal').show();

 // 隐藏模态框 $('#myModal').hide();

 // 切换模态框的显示状态 $('#myModal').toggle();
</script>

**总结**

Bootstrap 模态框是一种非常有用的工具，可以用来显示信息、提示用户或展示内容，而不影响页面的其余部分。它支持基本结构、事件和方法，方便开发者快速构建响应式网页。