前言
modal 是阿拉丁,摩擦神燈後就可以召喚出強大、無所不能的精靈,想知道它還有什麼神奇魔力嗎?繼續看下去,帶你體驗 a whole new world 。
( 圖片來源 )
官方網站的 Modal 頁面
在開始使用導覽列之前,需要了解它們是如何運作
- 互動視窗是用 HTML 、 CSS 和 JavaScript 建構的。它們位於文件中任何其他內容之上,並從
<body>
中刪除滾動,以便互動視窗的內容滾動。 - 點擊互動視窗
backdrop
將自動關閉互動視窗。 - Bootstrap 一次只支援一個互動視窗,因為認為巢狀互動視窗用戶體驗不佳。
- 互動視窗使用 position: fixed ,在渲染呈現上會有點特別,盡可能將互動視窗 HTML 放置在頂級位置,以避免其他元素的潛在干擾,在另一個固定元素中內加入一個 .modal 的時候,你可能會遇到問題。
- 由於 position: fixed ,在移動設備上使用互動視窗有一些附加說明,請參閱瀏覽器支援。
- 依據 HTML5 定義語義的方式, autofocus HTML 屬性 對 Bootstrap 互動視窗沒有影響,要達到同樣的效果,請使用一些自訂 JavaScript :
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
完整範例
通過點擊按鈕切換動態視窗呈現。它將從頁面頂部向下滑動並淡入。
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<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">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
靜態背景
當將背景設置為靜態時,互動視窗不會因為點擊背景而關閉。
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
I will not close if you click outside me. Don't even try to press escape key.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
滾動長內容
如果內容太長的話是在頁面上捲動,但也可以透過在 .modal-dialog 中加入 .modal-dialog-scrollable
來創建一個 body 可滾動互動視窗。
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
垂直置中
加入 .modal-dialog-centered
到 .modal-dialog 來使互動視窗垂直置中。
<div class="modal-dialog modal-dialog-centered">
...
</div>
使用網格
透過在 .modal-body 中加入 .container-fluid
於互動視窗中使用 Bootstrap 網格系統,然後像其他任何地方一樣使用正常的網格系統 class 。
<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 class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
</div>
</div>
</div>
不同的互動視窗內容
使用 event.relatedTarget 和 HTML data-bs-*
屬性,可依據點擊按鈕來導入不同動態視窗的內容。
HTML
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<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">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
JavaScript
<script>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
</script>
在互動視窗間切換
通過放置 data-bs-target
和 data-bs-toggle
屬性,在多個互動視窗間切換。請注意不能同時打開多個互動視窗,這種方法只能在兩個單獨的模態之間切換。
下方案例,點選 Open second modal 即開啟第二個互動視窗。
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
移除動畫
只需要在 .modal 中刪除 .fade
,即可移除淡入淡出的互動動畫。
親和性
務必請在 .modal 上添加 aria-labelledby="..."
來引用互動視窗標題,也可以在 .modal 上使用 aria-describedby 來描述你的動態視窗。請注意你不需要加上 role="dialog" ,因為 JavaScript 已經有添加了。
嵌入YouTube影片
在互動視窗上嵌入 YouTube 影片需要的 JavaScript 以自動停止重播或其他更多功能,欲了解更多請參閱 Stack Overflow 的文章。
大小選項
互動視窗有三個可選的大小,通過修改 .modal-dialog 上的 class 就可以,這些尺寸會在部分中斷點調整,看起來會在較窄的視窗上出現水平捲軸。
尺寸 | Class | 最大寬度 |
---|---|---|
小 | .modal-sm | 300px |
默認 | - | 500px |
大 | .modal-lg | 800px |
特大 | .modal-xl | 1140px |
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
滿版互動視窗
跳出一個完全覆蓋用戶螢幕的互動,可以一直在 .modal-dialog 上視窗來支持。
Class | 可用性 |
---|---|
.modal-fullscreen ( 所有解析度皆全屏 ) | 總是 |
.modal-fullscreen-sm-down ( sm 以下全屏 ) | 576px 以下 |
.modal-fullscreen-md-down ( md 以下全屏 ) | 768px 以下 |
.modal-fullscreen-lg-down ( lg 以下全屏 ) | 992px 以下 |
.modal-fullscreen-xl-down ( xl 以下全屏 ) | 1200px 以下 |
.modal-fullscreen-xxl-down ( xxl 以下全屏 ) | 1400px 以下 |