第二十二谈：弹出提示框和模态框

本节课我们来开始学习 Bootstrap 的提供的提示框和模态框组件。

一．提示框

1. 使用.toast 可以创建一个弹出提示框，默认是隐藏，设置 show 显示；

      <div class="toast show">
          <div class="toast-header">
              <strong class="mr-auto">提示框</strong>
              <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
                  <span>&times;</span>
              </button>
          </div>
          <div class="toast-body">
              这是一个简单的弹出信息！
          </div>
      </div>

2. 弹出提示框要求要通过脚本初始化，否则无法实现关闭功能；

      $('.toast').toast();

3. 如果关闭时想要过渡效果，加上.fade 即可，多个弹窗会向下叠加；

      <div class="toast show fade">

4. 可以直接用 CSS 定位调整出现的方位，比如右上角；

      <div class="toast" style="position: absolute; top: 0; right: 0;">

5. 点击弹窗时，默认是自动隐藏的，可以关闭它；

      <div class="toast" data-autohide="false">

二．模态框

1. 模态框.modal 系列样式组成，需要很多层次构建；

      <div class="modal fade" id="myModal">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5>模态框标题</h5>
                      <button class="close" data-dismiss="modal">
                          <span>&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                      body
                  </div>
                  <div class="modal-footer">
                      <button class="btn btn-primary">确认保存</button>
                      <button class="btn btn-secondary" data-dismiss="modal">
                          关闭
                      </button>
                  </div>
              </div>
          </div>
      </div>
      <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
          弹出模态框
      </button>

2. 模态框支持长文浏览模式，通过鼠标中键或者滚动条浏览；

      <div class="modal-body">
          body
          <p>.</p>
          <p>.</p>
          <p>.</p>
          <p>.</p>
          <p>.</p>
          <p>.</p>
          ...
      </div>

3. 模态框默认是偏上显示的，也可以设置居中显示；

      <div class="modal-dialog modal-dialog-centered">

3. 模态框支持设置大小，.modal-sm(xl、lg)等；

      <div class="modal-dialog modal-sm">

4. 模态框可以想象成一个完整的 HTML 区域，支持内部的表单、栅格、其它组件等；