Bootstrap 简明教程

Bootstrap - Modal demo

What is a modal?

引导中的模态框是叠加在当前页面上的一个对话框/弹出窗口。它用于显示重要信息，或在执行特定操作之前向用户询问确认。

模态框是引导中的一个核心 UI 组件，可以使用内置的 CSS 类和 JavaScript 方法轻松对其进行自定义。

class

description

.modal

用于定义模态框的基本结构

.modal-header

用于定义模态框的标题部分

.modal-body

用于定义模态框的主体部分

.modal-footer

用于定义模态框的页脚部分

.fade

用于向模态框添加淡入淡出效果

.modal-dialog

用于自定义模态框的大小和位置

.modal-content

用于自定义模态框的背景色和边框

.modal-title

用于自定义模态框的标题

.close

这用于为模态添加关闭按钮

以下列举了一些模态示例：

Example

Description

Download link

本示例显示静态模态。

本示例显示可滚动模态。

本示例显示带有静态背景的模态。

本示例显示带有工具提示的模态。

本示例显示带有弹出选项的模态。

本示例显示带有网格的模态。

本示例显示带有动画的模态。