模態
使用 Bootstrap 的 JavaScript 模態插件向您的站點添加對話框,用於燈箱、用戶通知或完全自定義的內容。
這個怎麼運作
在開始使用 Bootstrap 的模態組件之前,請務必閱讀以下內容,因為我們的菜單選項最近發生了變化。
- 模態框是用 HTML、CSS 和 JavaScript 構建的。它們位於文檔中的所有其他內容之上,並從中刪除滾動,
<body>
以便模態內容滾動。 - 單擊模態“背景”將自動關閉模態。
- Bootstrap 一次只支持一個模式窗口。不支持嵌套模式,因為我們認為它們是糟糕的用戶體驗。
- 模態使用
position: fixed
,它的渲染有時可能有點特別。只要有可能,將您的模態 HTML 放在頂級位置,以避免來自其他元素的潛在干擾。.modal
在另一個固定元素中嵌套 a 時,您可能會遇到問題。 - 再一次,由於
position: fixed
在移動設備上使用模態框有一些注意事項。有關詳細信息,請參閱我們的瀏覽器支持文檔。 - 由於 HTML5 定義其語義的方式,
autofocus
HTML 屬性在 Bootstrap 模式中無效。要達到相同的效果,請使用一些自定義 JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
媒體查詢。請參閱
我們可訪問性文檔的減少運動部分。
繼續閱讀演示和使用指南。
例子
模態組件
下面是一個靜態模態示例(意味著它的position
和display
已被覆蓋)。包括模態標題、模態正文(需要padding
)和模態頁腳(可選)。我們要求您盡可能在模式標題中包含解除操作,或提供另一個明確的解除操作。
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
現場演示
通過單擊下面的按鈕來切換工作模式演示。它將向下滑動並從頁面頂部淡入。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
靜態背景
當背景設置為靜態時,在其外部單擊時模態將不會關閉。單擊下面的按鈕進行嘗試。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
滾動長內容
當模式對於用戶的視口或設備而言變得太長時,它們會獨立於頁面本身滾動。試試下面的演示,看看我們的意思。
您還可以創建一個可滾動的模式,允許通過添加.modal-dialog-scrollable
來滾動模式主體.modal-dialog
。
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
垂直居中
添加.modal-dialog-centered
到.modal-dialog
垂直居中模式。
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
工具提示和彈出框
工具提示和彈出框可以根據需要放置在模式中。當模態框關閉時,其中的任何工具提示和彈出框也會自動關閉。
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
使用網格
通過嵌套.container-fluid
在.modal-body
. 然後,像在其他任何地方一樣使用普通的網格系統類。
<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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
改變模態內容
有一堆按鈕都觸發相同的模式,內容略有不同?使用event.relatedTarget
和HTMLdata-*
屬性(可能通過 jQuery)根據單擊的按鈕來改變模式的內容。
下面是一個現場演示,後面是示例 HTML 和 JavaScript。有關更多信息,請閱讀模態事件文檔以獲取有關relatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
更改動畫
變量決定模態淡入動畫前$modal-fade-transform
的變換狀態,變量決定模態淡入動畫結束時的變換。.modal-dialog
$modal-show-transform
.modal-dialog
例如,如果您想要放大動畫,您可以設置$modal-fade-transform: scale(.8)
.
移除動畫
對於只是出現而不是淡入查看.fade
的模態,請從模態標記中刪除該類。
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
動態高度
如果模態框在打開時的高度發生變化,您應該調用$('#myModal').modal('handleUpdate')
以重新調整模態框的位置,以防出現滾動條。
可訪問性
請務必將aria-labelledby="..."
引用模態標題添加到.modal
。此外,您可以使用aria-describedby
on 來描述您的模態對話框.modal
。請注意,您不需要添加role="dialog"
,因為我們已經通過 JavaScript 添加了它。
嵌入 YouTube 視頻
在模態中嵌入 YouTube 視頻需要額外的 JavaScript,而不是 Bootstrap 來自動停止播放等等。有關更多信息,請參閱這篇有用的 Stack Overflow 帖子。
可選尺寸
模態框有三種可選尺寸,可通過修飾符類放置在.modal-dialog
. 這些尺寸在某些斷點處開始,以避免在較窄的視口上出現水平滾動條。
尺寸 | 班級 | 模態最大寬度 |
---|---|---|
小的 | .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>
用法
模態插件通過數據屬性或 JavaScript 按需切換隱藏內容。它還添加.modal-open
到<body>
覆蓋默認滾動行為並生成一個.modal-backdrop
以提供單擊區域,以便在單擊模態框外時關閉顯示的模態框。
通過數據屬性
無需編寫 JavaScript 即可激活模式。在控制器元素上設置data-toggle="modal"
,如按鈕,以及一個data-target="#foo"
或href="#foo"
以特定模式為目標進行切換。
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
通過 JavaScript
myModal
使用單行 JavaScript調用帶有 id 的模式:
$('#myModal').modal(options)
選項
選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性,將選項名稱附加到 中data-
,如data-backdrop=""
.
姓名 | 類型 | 默認 | 描述 |
---|---|---|---|
背景 | 布爾值或字符串'static' |
真的 | 包括一個模態背景元素。或者,指定static 在單擊時不關閉模式的背景。 |
鍵盤 | 布爾值 | 真的 | 按下退出鍵時關閉模態 |
重點 | 布爾值 | 真的 | 初始化時將焦點放在模式上。 |
節目 | 布爾值 | 真的 | 初始化時顯示模態。 |
方法
.modal(options)
將您的內容激活為模式。接受一個可選選項object
。
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
手動切換模式。在模態框實際顯示或隱藏之前(即在or事件發生之前)返回給調用者。shown.bs.modal
hidden.bs.modal
$('#myModal').modal('toggle')
.modal('show')
手動打開一個模態。在模態實際顯示之前(即在事件發生之前)返回給調用者。shown.bs.modal
$('#myModal').modal('show')
.modal('hide')
手動隱藏模態。在模態框實際上被隱藏之前(即在事件發生之前)返回給調用者。hidden.bs.modal
$('#myModal').modal('hide')
.modal('handleUpdate')
如果模態在打開時的高度發生變化(即出現滾動條時),手動重新調整模態的位置。
$('#myModal').modal('handleUpdate')
.modal('dispose')
銷毀元素的模態。
活動
Bootstrap 的模態類公開了一些用於連接模態功能的事件。所有模態事件都在模態本身觸發(即在<div class="modal">
)。
事件類型 | 描述 |
---|---|
show.bs.modal | show 調用實例方法時立即觸發此事件。如果由單擊引起,則單擊的元素可用作relatedTarget 事件的屬性。 |
顯示.bs.modal | 當模式對用戶可見時觸發此事件(將等待 CSS 轉換完成)。如果由單擊引起,則單擊的元素可用作relatedTarget 事件的屬性。 |
hide.bs.modal | hide 調用實例方法時立即觸發此事件。 |
hidden.bs.modal | 當模態對用戶隱藏完成時會觸發此事件(將等待 CSS 轉換完成)。 |
hidePrevented.bs.modal | 當顯示模態時觸發此事件,其背景是static 並且在模態外部單擊或使用鍵盤選項執行退出鍵或data-keyboard 設置為false 。 |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})