39.Bootstrap(中文教程)元件：Modal:互动视窗

ㄧ.Modal:互动视窗

<div class="component" id="demo">  <div class="modal fade show" id="modal-demo">    <div class="modal-dialog">      <div class="modal-content">        <div class="modal-header">          <h5 class="modal-title">Modal</h5>          <button class="close" data-dismiss="modal">×</button>        </div>        <div class="modal-body">          <p>hello~</p>        </div>        <div class="modal-footer">          <button class="btn btn-primary">确认</button>          <button class="btn btn-secondary">取消</button>        </div>      </div>    </div>  </div>  <button class="btn btn-danger" data-toggle="modal" data-target="#modal-demo">删除</button></div>.demo.component{  padding: 50px;}

重点：

1.父元素为.modal.fade.show，在一个d-block显示
2.第二层为.modal-dialog
3.第三层为.modal-content
4.第四层为.modal-header .modal-body .modal-footer
5. .modal-header里面有h5.modal-title{Modal}与button.close[data-dismiss="modal"]{×}

6.data-dismiss="modal"为关闭视窗的功能

7.另外加一个与.modal同层的button，里面有data-toggle="modal"以及data-target="#modal-demo"，是呼叫互动视窗的元件
8.记得把d-block拿掉，才可以呼叫互动视窗

codepen
参考：bootstrap4