在 GitHub 上查看

模態

使用 Bootstrap 的 JavaScript 模態插件在您的站點上添加對話框，用於燈箱、用戶通知或完全自定義內容。

工作原理

在開始使用 Bootstrap 的模態組件之前，請確保閱讀以下內容，因為我們的菜單選項最近發生了變化。

  • 模态框是使用HTML、CSS和JavaScript构建的。它们被定位在文档的最上层，并移除了<body>的滚动条，以便模态框内容可以滚动。
  • 点击模态框的“背景”将自动关闭模态框。
  • Bootstrap只支持一次显示一个模态窗口。不支持嵌套的模态窗口，因为我们认为这会给用户带来不好的体验。
  • 模态框使用position: fixed，有时在渲染时可能会有些特殊。尽可能地将模态框的HTML放在顶层位置，以避免可能与其他元素的干扰。当将.modal嵌套在另一个固定元素中时，可能会遇到问题。
  • 由于再次使用了position: fixed，在移动设备上使用模态框会有一些注意事项。有关详细信息，请参阅我们的浏览器支持文档。
  • 由于HTML5定义了其语义，自动对焦的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">&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>

實時演示

通过单击下面的按钮来切换一个工作中的模态框演示。它将从页面顶部滑下并淡入。

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

靜態背景

当背景设置为静态时，单击模态框外部将不会关闭模态框。单击下面的按钮来尝试它。

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

滾動長內容

当模态框变得太长以适应用户的视口或设备时，它们会独立于页面本身滚动。尝试下面的演示以了解我们的意思。

您還可以創建一個可滾動的模態框，通過將.modal-dialog添加到.modal-dialog-scrollable來滾動模態框主體。

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

垂直置中

將.modal-dialog添加到.modal-dialog-centered以使模態框在垂直方向上居中。

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

使用網格

在模态框中利用 Bootstrap 栅格系统，将 .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 和 HTML data-* 属性（可能通过 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">&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)
})

更改動畫

$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') 来重新调整模态框的位置，以防出现滚动条。

無障礙性

确保在 .modal 上添加 aria-labelledby="..."，引用模态框的标题。另外，你可以在 .modal 上使用 aria-describedby 给你的模态对话框添加描述。注意，你不需要添加 role="dialog"，因为我们已经通过 JavaScript 添加了它。

嵌入 YouTube 影片

將YouTube視頻嵌入模態中需要額外的JavaScript，而不是Bootstrap，以自動停止播放等操作。 請參閱這篇有用的Stack Overflow帖子 以獲取更多信息。

可選大小

模態有三種可選尺寸，通過修改類應用於.modal-dialog上。這些尺寸在特定斷點處生效，以避免在較窄的視口上出現水平滾動條。

尺寸 類 模態最大寬度
小 .modal-sm 300像素
默認 無 500像素
大 .modal-lg 800像素
特大 .modal-xl 1140像素

我們的默認模態不帶修改類，屬於“中”尺寸模態。

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

使用方法

模態插件通過數據屬性或JavaScript根據需要切換隱藏的內容。它還在<body>上添加.modal-open以覆蓋默認的滾動行為，並生成.modal-backdrop以提供單擊區域以在點擊模態外部時關閉顯示的模態。

通過數據屬性

無需編寫JavaScript即可激活模態。在控制元素（如按鈕）上設置data-toggle="modal"，以及data-target="#foo"或href="#foo"來定位要切換的特定模態。

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

通過 JavaScript

用單行JavaScript調用id為myModal的模態

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

選項

選項可以通過數據屬性或JavaScript傳遞。對於數據屬性，將選項名附加到data-，如data-backdrop=""。

名稱 類型 默認 描述
背景 布爾值或字符串'static' true 包括模態背景。或者，指定static以獲得單擊時不關閉模態的背景。
鍵盤 布爾值 true 當按下Esc鍵時關閉模態
焦點 布爾值 true 初始化時將焦點放在模態上。
顯示 布爾值 true 初始化時顯示模態。

方法

異步方法和過渡

所有API方法都是異步的，並啟動一個過渡。它們在過渡開始後立即返回給調用方，但在過渡結束前返回。此外，對過渡中的組件的方法調用將被忽略。

請參閱我們的JavaScript文檔以獲取更多信息.

.modal(options)

將您的內容激活為模態。接受一個可選的選項對象。

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

.modal('toggle')

手動切換一個模態對話框。 在模態實際顯示或隱藏之前，返回給調用方（即在 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 屬性可用。
shown.bs.modal 當模態已對用戶可見時觸發此事件（將等待 CSS 過渡完成）。 如果是由點擊觸發，則點擊的元素將作為事件的 relatedTarget 屬性可用。
hide.bs.modal 當調用 hide 實例方法時立即觸發此事件。
hidden.bs.modal 當模態已從用戶隱藏完成時觸發此事件（將等待 CSS 過渡完成）。
hidePrevented.bs.modal 當模態顯示時，其背景是 static，並且在鍵盤選項或 data-keyboard 設置為 false 的情況下執行模態外部的點擊或按下 ESC 鍵時觸發此事件。 
$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})