互動視窗 (Modal)

使用 Bootstrap JavaScript 的互動視窗插件來增加一個對話視窗、用戶提示或完整的自訂內容。

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去

如何運作

在開始使用 Bootstrap 動態視窗之前,請務必閱讀以下內容,因位選單項目在近期內有修改。

  • 動態視窗是用 HTML、CSS 和 JavaScript 構建的。 它們位於文件中任何其他東西之上,並從 <body> 中刪除滾動,以便動態視窗的內容滾動。
  • 點擊動態視窗 “backdrop” 將自動關閉動態視窗。
  • Bootstrap 一次只支援一個動態視窗。不支援巢狀動態視窗,因為我們認為巢狀動態視窗用戶體驗不佳。
  • 動態視窗使用 position: fixed 在呈現的方式有點特別。盡可能將您的動態視窗 HTML 放置在頂級位置,以避免其他元素的潛在干擾。在另一個固定元素中內加入一個 .modal 的時候,你可能會遇到問題。
  • 由於 position: fixed,在移動設備上使用動態視窗有一些附加說明。有關詳細資訊,請參閱 我們的瀏覽器支援

  • 依據 HTML5 定義其語義,autofocus HTML 屬性 對 Bootstrap 動態視窗沒有影響。 要達到同樣的效果,請使用一些自訂 JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

範例

動態視窗元件

下面是一個 static 動態視窗範例(意思是它的 positiondisplay 已被重寫)。 包括動態視窗標題、動態視窗體(padding 必要)和動態視窗頁腳(可選)。盡可能地包含動態視窗標題與移除按鈕,或提供另一個明確的移除操作。

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

工具提示和彈出提示框

Tooltipspopovers 可以根據需要放置在動態視窗。 當動態視窗關閉時,其中的任何工具提示和插件也將自動關閉。

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

使用網格

通過 .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 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.relatedTargetHTML 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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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)
})

移除動畫

對於只要出現而不需要淡入淡出的動態視窗,請從你的動態視窗標記中刪除 .fade

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

動態高度

如果一個動態視窗的高度在打開時改變,你應該調用 $('#myModal').data('bs.modal').handleUpdate()$('#myModal').modal('handleUpdate') 來重新調整動態視窗的位置,以防止捲軸出現。

親和性

請務必在.modalrole="document" 動態視窗標題的 .modal-dialog 中添加 .modal-dialogaria-labelledby="..."。另外,您可以使用 .modal 上的 aria-descriptby 來描述你的動態視窗。

嵌入YouTube影片

在動態視窗上嵌入 YouTube 影片需要額外的 JavaScript 不在 Bootstrap 自動停止重播和更多。有關詳細資訊,請參閱 Stack Overflow 的文章

大小選項

動態視窗有兩個可選的大小,可以通過 Class 放在 .modal-dialog 上。 這些尺寸會在某些中斷點調整,以避免在較窄的 viewport 上出現水平捲軸。

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</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

使用單行 JavaScript 調用 id 為 myModal 的動態視窗。

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

選項

可以透過資料屬性或 JavaScript 傳遞選項。對於資料屬性,將選項名稱附加到 ` data-,如 data-backdrop=””` 那樣。

名稱 類型 預設值 描述
backdrop boolean or the string 'static' true 包括動態視窗背景元素。或者指定 static 在點擊背景時不關閉動態視窗。
keyboard boolean true 按下 ESC 時關閉動態視窗
focus boolean true 初始化時 focus 動態視窗。
show boolean true Shows the modal when initialized.

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.modal(options)

透過動態視窗啟用你的內容,將選項加入 object 內。

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

.modal('toggle')

手動切換動態視窗。 在動態視窗實際顯示或隱藏之前返回給調用者(即在 shown.bs.modalhidden.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')

銷毀一個元素的 Modal。

事件

Bootstrap 動態視窗提供了一下事件,所有相關事件都被觸發在他本身的狀態中(在 <div class="modal">)。

事件類型 描述
show.bs.modal 當調用 show 實例方法時,此事件會立即觸發。如果是因點擊,點擊的元素作為事件的 relatedTarget 屬性可用。
shown.bs.modal 當動態視窗顯示時會觸發此事件(等待 CSS 轉換完成)。如果是因點擊導致,點擊的元素作為事件的 relatedTarget 屬性可用。
hide.bs.modal 當調用 hide 實例方法時,會立即觸發此事件
hidden.bs.modal 當動態視窗隱藏後會觸發此事件(等 CSS 轉換完成)。
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})