Bootstrap4 模態框
模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊交互等。
如何創建模態框
以下實例創建了一個簡單的模態框效果 ：
實例
<!-- 按鈕：用於打開模態框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打開模態框
</button>
<!-- 模態框 -->
<div class="modal fade" 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-secondary" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
模態框尺寸
我們可以通過添加 .modal-sm 類來創建一個小模態框，.modal-lg 類可以創建一個大模態框。
尺寸類放在 <div>元素的 .modal-dialog 類後 :
實例 - 小模態框
<div class="modal-dialog modal-sm">
實例 - 大模態框
<div class="modal-dialog modal-lg">