Bootstrap - 模態框：初學者指南

你好，未來的網頁開發者們！今天，我們將要進入Bootstrap模態框的精彩世界。如果你之前從未聽說過它們，也不用擔心——在這個教學結束時，你將能像專業人士一樣創建彈出窗口！

Bootstrap - Modal

模態框是什麼？

在我們開始之前，讓我們先了解模態框是什麼。想像你正在讀一本書，突然之間，一個小粘貼便箋彈出，上面寫著重要信息。這就是模態框在網站上的作用！它是一個對話框或彈出窗口，會出現在當前頁面的上方。

模態框組件

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

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">模態框標題</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
</div>
<div class="modal-body">
<p>模態框內容文字放在這裡。</p>
</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>

讓我們來分解一下：

最外層的<div>，類別為"modal"，是主要的容器。
內部，我們有"modal-dialog"，它控制模態框的形狀和位置。
"modal-content"包含我們模態框的實際內容。
然後我們有三個部分：頭部、身體和底部。

靜態背景

有時候，你希望模態框在用戶與其交互之前保持顯示。這時，靜態背景就派上用場了：

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- 模態框內容 -->
</div>

通過添加data-bs-backdrop="static"，點擊模態框外部不會關閉模態框。data-bs-keyboard="false"則阻止使用Esc鍵關閉。

可滾動模態框

內容很多？沒問題！讓你的模態框可滾動：

<div class="modal-dialog modal-dialog-scrollable">
<!-- 模態框內容 -->
</div>

添加modal-dialog-scrollable類別允許模態框身體滾動，同時保持頭部和底部不變。

垂直居中

想要你的模態框正好在屏幕中間？這太簡單了！

<div class="modal-dialog modal-dialog-centered">
<!-- 模態框內容 -->
</div>

modal-dialog-centered類別會讓你的模態框垂直居中。

工具提示和彈出提示

你甚至可以在模態框內使用工具提示和彈出提示。只需記得初始化它們：

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

使用網格

Bootstrap的網格系統在模態框內也同樣有效！這裡有一個例子：

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

這在模態框身體內創建了一個兩列佈局。

變化模態框內容

你可以動態地更改模態框的內容。這是怎麼做到的：

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = '新消息給 ' + recipient
modalBodyInput.value = recipient
})

這段腳本會根據觸發它的按鈕更改模態框的內容。

在模態框之間切換

你甚至可以在不同的模態框之間切換：

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- 第一個模態框內容 -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">打開第二個模態框</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- 第二個模態框內容 -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">回到第一個</button>
</div>

變更動畫

想要為你的模態框的進入增加一點趣味？試著更改動畫：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- 模態框內容 -->
</div>

fade類別會增加一個優雅的淡入效果。你可以使用CSS創建自定義動畫！

動態高度

模態框可以根據內容調整其高度：

<div class="modal-dialog modal-dialog-scrollable">
<!-- 變化高度的模態框內容 -->
</div>

modal-dialog-scrollable類別確保無論內容長度如何，你的模態框看起來都很棒。

輔助功能

始終考慮輔助功能！使用aria-labelledby來引用模態框標題：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">模態框標題</h5>
<!-- 其餘的模態框內容 -->
</div>
</div>
</div>
</div>

選擇大小

模態框有不同的大小：

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

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

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

全屏模態框

想要你的模態框佔滿整個屏幕？使用全屏類別：

<div class="modal-dialog modal-fullscreen">
<!-- 模態框內容 -->
</div>

你也可以讓它在某些屏幕大小下才是全屏：

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- 模態框內容 -->
</div>

這個模態框會在小屏幕及以下大小時為全屏。

就是这样！你现在已经装备了使用Bootstrap创建令人惊叹的模态框的知识。记住，熟能生巧，所以不要害怕尝试这些概念。快乐编码！

方法	描述
.modal(options)	激活你的内容为模态框。接受一个可选的选项对象。
.modal('toggle')	手动切换模态框。
.modal('show')	手动打开模态框。
.modal('hide')	手动隐藏模态框。
.modal('handleUpdate')	当模态框打开时，如果模态框的高度发生变化（例如，滚动条出现），则手动调整模态框的位置。
.modal('dispose')	销毁元素的模态框。

Credits: Image by storyset