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>
顯示: