Bootstrap 4 模態框
Bootstrap 4 模態框
模態框元件是一個對話方塊/彈出視窗，它顯示在當前頁面的頂部
如何建立模態框
以下示例展示瞭如何建立一個基本的模態框
示例
<!-- 開啟模態框的按鈕 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
開啟模態框
</button>
<!-- 模態框 -->
<div class="modal" 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-danger" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
自己動手試一試 »
新增動畫
使用 .fade 類在開啟和關閉模態框時新增淡入淡出效果
模態框大小
透過新增 .modal-sm 類（小模態框）、.modal-lg 類（大模態框）或 .modal-xl 類（超大模態框）來改變模態框的大小。
將大小類新增到具有 .modal-dialog 類的 <div> 元素上
預設情況下，模態框的大小為“中等”。
居中模態框
使用 .modal-dialog-centered 類將模態框在頁面內垂直和水平居中
可滾動模態框
當模態框中有大量內容時，頁面會新增捲軸。請參閱下面的示例來理解它
但是，可以透過將 .modal-dialog-scrollable 新增到 .modal-dialog 來實現僅在模態框內部滾動，而不是在頁面本身上滾動。
完整的 Bootstrap 模態框參考
有關所有模態框選項、方法和事件的完整參考，請訪問我們的 Bootstrap JS 模態框參考。
