Bootstrap 模态框

定义和使用

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

以下示例显示了如何创建基本模态：

//打开模态的按钮
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   打开模态框
</button>
//模态框
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      //模态头部 
      <div class="modal-header">
        <h4 class="modal-title">我是头部</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      //模态内容
      <div class="modal-body">
        我是模态内容
      </div>
      //模态尾部 
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

尝试一下

输出结果如下：

添加动画效果

在打开和关闭模态框时，使用 .fade 类添加淡入淡出效果：
```
//fade 淡入淡出效果
<div class="modal fade"></div>
```
尝试一下
输出结果如下：

我是头部

我是模态内容
模态框大小

通过添加 .modal-sm 类（用于小模态框）、.modal-lg 类（用于大模态框）或 .modal-xl（用于特大型模态框）来更改模态的大小。

使用class .modal-dialog 将更改大小的类添加到 <div> 元素：
小模态框
```
<div class="modal-dialog modal-sm"></div>
```
尝试一下
大模态框
```
<div class="modal-dialog modal-lg"></div>
```
尝试一下
特大模态框
```
<div class="modal-dialog modal-xl"></div>
```
尝试一下
默认情况下，模态的大小为“中等大小”。
居中模态框

使用 .modal-dialog-centered 类，将模式在页面内垂直和水平居中：
```
  <div class="modal-dialog modal-dialog-centered"></div>
```
尝试一下
输出结果如下：

我是头部

我是模态内容
滚动模式

当模态中有很多内容时，滚动条将添加到页面；下面示例演示了它：
```
<div class="modal-dialog"></div>
```
尝试一下
然而，通过在 .modal-dialog 中添加 .modal-dialog-scrollable，可以仅在模式内部而不是页面本身中进行滚动：
```
<div class="modal-dialog modal-dialog-scrollable"></div>
```
尝试一下
有关更多模态框的知识，请阅读我们的 Bootstrap 模态框参考

Bootstrap 模态框

定义和使用

我是头部

添加动画效果

我是头部

模态框大小

居中模态框

我是头部

滚动模式