模态框插件是一个对话框/弹出窗口，显示在当前页面的顶部:

模态中的一些文本。

提示: 插件可以单独包含 (使用 "modal.js" 文件)，也可以一次包含所有插件 (使用 "bootstrap.js" 使用 "bootstrap.min.js")。

以下实例创建了一个简单的模态框效果:

                      ×         Modal Header                    

Some text in the modal.

"Trigger" 部分:

要触发模态窗口，需要使用按钮或链接。

然后包括两个 data-* 属性:

"Modal" 部分:

模态的父级 的ID必须与用于触发模态的 data-target 属性 ("myModal") 的值相同。

.modal 类将 的内容识别为模态，并将重点放在它上。

.fade 类增加了一个过渡效果，使模态淡入淡出。如果不想产生这种效果，请删除此类。

属性 role="dialog" 提高了使用屏幕阅读器的人的可访问性。

.modal-dialog 类设置模态的适当宽度和边距。

"Modal content" 部分:

带有 class="modal-content 样式的模态（边框、背景色等）。 在这个 中，添加模态的页眉、正文和页脚。

.modal-header 类用于定义模态的标题样式。 标题中的 有一个 data-dismiss="modal" 属性，如果你点击它，它会关闭模态。 .close 类设置关闭按钮的样式， .modal-title 类将标题样式设置为适当的线条高度。

.modal-body 类用于定义模态主体的样式。在这里添加任何HTML标记；段落、图像、视频等。

.modal-footer 类用于定义模态页脚的样式。请注意，默认情况下，此区域是右对齐的。

我们可以通过添加 .modal-sm 类来创建一个小模态框， 添加 .modal-lg 类可以创建一个大模态框

尺寸类放在 元素的 .modal-dialog 类后:

默认情况下，模态框是中等大小的。

有关所有模态框的选项、方法和事件的完整参考，请访问 Bootstrap JS 模态框参考。