Bootstrap 模態框
Bootstrap 模態框（Modal）是 Bootstrap 框架中的一個組件，它允許你在一個頁面中創建一個模態對話框，用于顯示內容、表單、圖像或其他信息。模態框通常覆蓋在當前頁面上，提供了一種不離開當前頁面的交互方式。
模態框的基本用法
1. 基礎模態框
要創建一個基本的模態框，你需要使用 div 元素來包裹模態框的內容，并為它添加 modal 類。同時，還需要一個觸發模態框的按鈕，通常使用 data-bs-toggle="modal" 屬性來綁定模態框的 ID。
<!-- 模態框的觸發按鈕 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打開模態框
</button><!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="myModalLabel">模態框標題</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">這里是模態框的內容。</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button><button type="button" class="btn btn-primary">保存</button></div></div></div>
</div>
2. 自定義模態框
模態框可以自定義樣式和內容。以下是一個自定義模態框的示例：
<!-- 模態框的觸發按鈕 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#customModal">打開自定義模態框
</button><!-- 自定義模態框（Modal） -->
<div class="modal fade" id="customModal" tabindex="-1" aria-labelledby="customModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="customModalLabel">自定義模態框標題</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>這里是自定義模態框的內容。</p><form><!-- 表單內容 --></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button><button type="button" class="btn btn-primary">提交</button></div></div></div>
</div>
模態框的屬性
Bootstrap 模態框支持多種屬性，以下是一些常用的屬性：
data-bs-backdrop: 控制模態框背景的顯示方式，可選值有static（固定背景）、false（不顯示背景）、true（顯示背景）。data-bs-keyboard: 控制是否可以通過按Esc鍵關閉模態框，可選值有true（允許）、false（不允許）。data-bs-focus: 控制模態框打開時，是否將焦點自動移動到模態框內的第一個元素，可選值有true（允許）、false（不允許）。
模態框的事件
Bootstrap 模態框支持多種事件，以下是一些常用的事件：
show: 模態框顯示時觸發。hidden: 模態框隱藏時觸發。show.bs.modal: 模態框顯示前觸發。hidden.bs.modal: 模態框隱藏后觸發。
總結
Bootstrap 模態框是一個強大的組件，可以幫助你創建美觀、易于使用的模態對話框。通過合理運用模態框的屬性和事件，你可以實現各種功能，提升用戶體驗。希望本文能幫助你更好地了解和使用 Bootstrap 模態框。
