Bootstrap - 模態框範例

模態框是什麼？

你好，有抱負的網頁開發者！今天，我們將要深入Bootstrap模態框的精彩世界。作為你們親切的小區電腦老師，我在這裡指引你們這次旅程，一步一步。所以，拿起你們最喜歡的飲料，放鬆一下，我們一起踏上這次模態框的冒險吧！

Bootstrap - Modals Demo

定義與目的

在網頁開發術語中，模態框就像是一個出現在當前頁面頂部的彈出窗口。這是一種展示內容而不需要從當前視图中導航的絕佳方式。想像你正在閱讀一篇文章，突然你想了解更多關於特定術語的信息。不需要打開一個新頁面，一個模態框可以出現，提供額外的細節，讓你能夠快速回到你的閱讀。很棒吧？

Bootstrap，我們在網頁設計中的可靠助手，提供了一個優秀的模態框組件，既容易使用又高度可定制。讓我們來探索如何實現它！

基本模態框結構

HTML結構

讓我們從Bootstrap模態框的基本HTML結構開始：

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">模態框標題</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>模態框身體文字放在這裡。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>

讓我們分解一下：

最外層的<div>帶有modal類是整個模態框的容器。
內部，我們有一個modal-dialog，它將模態框內容居中。
modal-content div 包含我們模態框的實際內容。
我們然後有三個主要部分：

modal-header：包含標題和關閉按鈕。
modal-body：主要內容放置的地方。
modal-footer：通常包含動作按鈕。

觸發模態框

現在，我們如何讓這個模態框出現？我們需要一個觸發器！這通常是一個按鈕：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
啟動演示模態框
</button>

注意data-toggle="modal"和data-target="#exampleModal"。這些告訴Bootstrap要做什麼（切換一個模態框）以及要顯示哪個模態框（具有id "exampleModal"的那個）。

記得在你的模態框中添加一個id，與data-target匹配：

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<!-- 模態框內容在這裡 -->
</div>

自定義你的模態框

大小

Bootstrap讓你輕鬆地更改模態框的大小。只需在modal-dialog div中添加一個類：

<!-- 小模態框 -->
<div class="modal-dialog modal-sm">...</div>

<!-- 大模態框 -->
<div class="modal-dialog modal-lg">...</div>

<!-- 非常大的模態框 -->
<div class="modal-dialog modal-xl">...</div>

居中模態框

想要你的模態框完美居中？添加modal-dialog-centered類：

<div class="modal-dialog modal-dialog-centered">...</div>

可滾動模態框

如果你的模態框內容很長，你可以讓它可滾動：

<div class="modal-dialog modal-dialog-scrollable">...</div>

使用JavaScript添加功能

雖然Bootstrap的數據屬性對於基本功能來說非常好，但有時候你需要更多的控制。這時JavaScript就派上用場了！

// 顯示模態框
$('#exampleModal').modal('show');

// 隱藏模態框
$('#exampleModal').modal('hide');

// �切換模態框
$('#exampleModal').modal('toggle');

你也可以聽取模態框事件：

$('#exampleModal').on('shown.bs.modal', function () {
console.log('模態框現在可見！');
})

實際範例：刪除確認模態框

讓我們把所有東西放在一起，用一個真實世界的例子。想像我們正在建一個待辦事項應用程序，我們在刪除任務之前想要確認：

<!-- 刪除按鈕 -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
刪除任務
</button>

<!-- 模態框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">確認刪除</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
你確定要刪除此任務？這個操作無法撤回。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" id="confirmDelete">刪除</button>
</div>
</div>
</div>
</div>

這裡有一些JavaScript來處理刪除：

$('#confirmDelete').on('click', function() {
// 刪除任務的代碼在這裡
console.log('任務已刪除！');
$('#deleteModal').modal('hide');
});

結論

恭喜你！你剛剛學會了Bootstrap模態框的來龍去脈。從基本結構到定制，甚至到一個實際的例子，你現在已經裝備好了，可以將這個強大的功能添加到你的網頁項目中。

記住，熟能生巧。嘗試創建不同類型的模態框，嘗試不同的大小和位置，最重要的是，玩得開心！也許你會成為你編碼朋友中的“模態框大師”。

開心編程，願你的模態框總是在正確的時刻彈出！

Credits: Image by storyset