Bootstrap 5 模態框
模態框
模態框（Modal）元件是一個對話方塊/彈出視窗，它會顯示在當前頁面的頂部
如何建立模態框
以下示例展示瞭如何建立一個基本的模態框
示例
<!-- 開啟模態框的按鈕 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模態框內容 -->
<div class="modal-body">
模態框內容..
</div>
<!-- 模態框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
自己動手試一試 »
新增動畫
使用 .fade 類可以在開啟和關閉模態框時新增淡入淡出效果
模態框大小
透過新增 .modal-sm 類（最大寬度 300px）來設定小尺寸模態框，新增 .modal-lg 類（最大寬度 800px）來設定大尺寸模態框，或者使用 .modal-xl 來設定特大尺寸模態框（最大寬度 1140px）。預設的最大寬度為 500px。
將大小類新增到具有 .modal-dialog 類的 <div> 元素上
預設情況下，模態框尺寸為“中等”（最大寬度 500px）。
全屏模態框
如果您希望模態框佔據整個頁面寬度和高度，請使用 .modal-fullscreen 類
響應式全屏模態框
您還可以透過 .modal-fullscreen-*-* 類來控制模態框何時進入全屏模式
| 類 | 描述 | 示例 |
|---|---|---|
.modal-fullscreen-sm-down |
在 576px 以下全屏 | 試一試 |
.modal-fullscreen-md-down |
在 768px 以下全屏 | 試一試 |
.modal-fullscreen-lg-down |
在 992px 以下全屏 | 試一試 |
.modal-fullscreen-xl-down |
在 1200px 以下全屏 | 試一試 |
.modal-fullscreen-xxl-down |
在 1400px 以下全屏 | 試一試 |
居中模態框
使用 .modal-dialog-centered 類，在頁面內垂直和水平居中模態框
滾動模態框
當模態框內內容過多時，會為頁面新增捲軸。請參閱下面的示例以理解這一點
然而，可以透過向 .modal-dialog 新增 .modal-dialog-scrollable 來實現只在模態框內部滾動，而不是滾動整個頁面。
