Bootstrap靜態(tài)框（Modal）是一種常用的交互組件，主要用于在網(wǎng)頁上創(chuàng)建對話框，常見的應用場景包括Bootstrap靜態(tài)框（Modal）是一種常用的交互組件，主要用于在網(wǎng)頁上創(chuàng)建對話框，常見的應用場景包括燈箱、用戶通知或完全自定義的內(nèi)容。

一、運作方式

在使用 Bootstrap 的模態(tài)組件之前，請務必閱讀以下內(nèi)容，因為 Bootstrap 的菜單選項最近發(fā)生了變化。

1、模態(tài)是通過使用 HTML、CSS 和 JavaScript 構(gòu)建的。它們位于文檔中的其他所有內(nèi)容之上，并從中刪除滾動條，以便模態(tài)內(nèi)容可以滾動。

2、單擊模態(tài)窗口外部的區(qū)域?qū)⒆詣雨P(guān)閉模態(tài)。

3、Bootstrap 同時僅支持一個模態(tài)窗口。不支持嵌套模態(tài)，因為我們認為它們會帶來糟糕的用戶體驗。

4、模態(tài)使用 position: fixed，這有時對其渲染有點特殊。盡可能將模態(tài) HTML 放在頂級位置，以避免其他元素的潛在干擾。將模態(tài)嵌套在另一個固定元素中時，可能會遇到問題。

5、由于 HTML5 定義其語義的方式，自動對焦 HTML 屬性在 Bootstrap 模態(tài)中沒有影響。要達到相同的效果，請使用一些自定義 JavaScript：

$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})

二、模態(tài)組件

下面是一個靜態(tài)模態(tài)示例。包括模態(tài)頁眉、模態(tài)正文（必需）和模態(tài)頁腳（可選）。我們要求盡可能在模式標頭中包含關(guān)閉操作，或提供另一個顯式關(guān)閉操作。

<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">&times;</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>

三、演示模式

通過單擊下面的按鈕切換工作模態(tài)演示，它將從頁面頂部向下滑動并淡入。

<!-- 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">&times;</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>

四、靜態(tài)背景

當背景設置為靜態(tài)時，在外部單擊時，模態(tài)不會關(guān)閉。點擊下面的按鈕進行嘗試。

<!-- 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">&times;</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>

五、滾動長內(nèi)容

當模態(tài)對于用戶的視口或設備來說太長時，它們會獨立于頁面本身滾動。

還可以創(chuàng)建一個可滾動的模態(tài)，該模態(tài)允許通過添加.modal-dialog-scrollable.modal-dialog來滾動模態(tài)主體。

<!-- 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>

七、工具提示和彈出框

工具提示和彈出框可以根據(jù)需要放置在模態(tài)中。當模式關(guān)閉時，其中的任何工具提示和彈出框也會自動關(guān)閉。

<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="tooltip-test" title="Tooltip">This link</a> and <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

八、使用網(wǎng)格

通過嵌套在模態(tài)中來利用 Bootstrap 網(wǎng)格系統(tǒng)。然后，像使用其他任何地方一樣使用普通的網(wǎng)格系統(tǒng)類。

<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>

九、不同模態(tài)內(nèi)容

有一堆按鈕都觸發(fā)相同的模態(tài)，但內(nèi)容略有不同。使用 和 HTML data-* 屬性（可能通過 jQuery）根據(jù)單擊的按鈕來改變模式的內(nèi)容。

下面是一個現(xiàn)場演示，然后是示例 HTML 和 JavaScript。

<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">&times;</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)
})

十、更改動畫

該變量確定模態(tài)淡入動畫之前的變換狀態(tài)，該變量確定模態(tài)淡入動畫結(jié)束時的變換。例如，如果需要放大動畫，可以設置 .$modal-fade-transform: scale(.8)

十一、刪除動畫

對于僅顯示而不是淡入視圖的模態(tài)，請從模態(tài)標記中刪除該類

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>

十二、動態(tài)高度

如果模態(tài)在打開時高度發(fā)生變化，則應調(diào)用以重新調(diào)整模態(tài)的位置，以防出現(xiàn)滾動條。

十三、可選尺寸

模態(tài)有三種可選大小，可通過放置在.modal-dialog這些大小在某些斷點處啟動，以避免在較窄的視口上出現(xiàn)水平滾動條。

沒有修飾符類的默認模態(tài)構(gòu)成了“中等”大小的模態(tài)。

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

十四、用法

模態(tài)插件通過數(shù)據(jù)屬性或 JavaScript 按需切換隱藏內(nèi)容。它還增加了 to 覆蓋默認滾動行為，并生成一個 to 提供一個單擊區(qū)域，用于在單擊模式外部時關(guān)閉顯示的模式。

1、通過數(shù)據(jù)屬性

在不編寫 JavaScript 的情況下激活模式。在控制器元素（如按鈕）上設置，以及 or 以目標特定模式進行切換。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

2、通過JavaScript

使用一行 JavaScript 調(diào)用具有 id 的模態(tài)：

$('#myModal').modal(options)

3、選項

選項可以通過數(shù)據(jù)屬性或 JavaScript 傳遞。對于數(shù)據(jù)屬性，將選項名稱追加到data-data-backdrop=””，如下表中所示。

4、方法

異步方法和轉(zhuǎn)換：所有 API 方法都是異步的，并啟動轉(zhuǎn)換。它們在轉(zhuǎn)換開始后但在轉(zhuǎn)換結(jié)束之前立即返回給調(diào)用方。此外，對轉(zhuǎn)換組件的方法調(diào)用將被忽略。

.modal(options)：將內(nèi)容激活為模態(tài)。接受可選選項 。

$('#myModal').modal({
keyboard: false
})

.modal(‘toggle’)：手動切換模式。在模態(tài)實際顯示或隱藏之前（即在 or 事件發(fā)生之前）返回給調(diào)用方。

$('#myModal').modal('toggle')

.modal(‘show’)：手動打開模式。在實際顯示模態(tài)之前（即在事件發(fā)生之前）返回給調(diào)用方。

$('#myModal').modal('show')

.modal(‘hide’)：手動隱藏模式。在模態(tài)實際隱藏之前（即在事件發(fā)生之前）返回給調(diào)用方。

$('#myModal').modal('hide')

.modal(‘handleUpdate’)：如果模態(tài)在打開時模式的高度發(fā)生變化（即出現(xiàn)滾動條），則手動重新調(diào)整模式的位置。

$('#myModal').modal('handleUpdate')

.modal(‘dispose’)：銷毀元素的模態(tài)。

十五、事件

Bootstrap 的模態(tài)類公開了一些事件，用于掛接到模態(tài)功能。所有模態(tài)事件都是在模態(tài)本身觸發(fā)的。

$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})