ㄧ.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