<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

動態(tài)實例

點擊下面的按鈕即可通過 JavaScript 啟動一個模態(tài)框。此模態(tài)框?qū)纳系较?、逐漸浮現(xiàn)到頁面前。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

增強模態(tài)框的可訪問性

務必為 .modal 添加 role="dialog" 和 aria-labelledby="..." 屬性，用于指向模態(tài)框的標題欄；為 .modal-dialog 添加 aria-hidden="true" 屬性。

另外，你還應該通過 aria-describedby 屬性為模態(tài)框 .modal 添加描述性信息。

可選尺寸

模態(tài)框提供了兩個可選尺寸，通過為 .modal-dialog 增加一個樣式調(diào)整類實現(xiàn)。

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

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <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=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

禁止動畫效果

如果你不需要模態(tài)框彈出時的動畫效果（淡入淡出效果），刪掉 .fade 類即可。

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

用法

通過 data 屬性或 JavaScript 調(diào)用模態(tài)框插件，可以根據(jù)需要動態(tài)展示隱藏的內(nèi)容。模態(tài)框彈出時還會為 <body> 元素添加 .modal-open 類，從而覆蓋頁面默認的滾動行為，并且還會自動生成一個 .modal-backdrop 元素用于提供一個可點擊的區(qū)域，點擊此區(qū)域就即可關(guān)閉模態(tài)框。

通過 data 屬性

不需寫 JavaScript 代碼也可激活模態(tài)框。通過在一個起控制器作用的元素（例如：按鈕）上添加 data-toggle="modal" 屬性，或者 data-target="#foo" 屬性，再或者 href="#foo" 屬性，用于指向被控制的模態(tài)框。

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

通過 JavaScript 調(diào)用

只需一行 JavaScript 代碼，即可通過元素的 id myModal 調(diào)用模態(tài)框：

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

參數(shù)

可以將選項通過 data 屬性或 JavaScript 代碼傳遞。對于 data 屬性，需要將參數(shù)名稱放到 data- 之后，例如 data-backdrop=""。

名稱	類型	默認值	描述
backdrop	boolean	true	為模態(tài)對話框添加一個背景元素。另外，為背景指定`static`時，點擊模態(tài)對話框的外部區(qū)域不會將其關(guān)閉。
keyboard	boolean	true	按下esc鍵時關(guān)閉模態(tài)對話框
show	boolean	true	初始化時即顯示模態(tài)對話框
remote	path	false	如果提供了遠程url地址，就會通過 jQuery的`load`方法加載內(nèi)容并注入到`.modal-body`中。如果你使用的是data屬性api，你還可以使用`href`標簽指定遠程數(shù)據(jù)源。案例如下： `<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>`

方法

.modal(options)

將頁面中的某塊內(nèi)容作為模態(tài)框激活。接受可選參數(shù) object。

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

.modal('toggle')

手動打開或關(guān)閉模態(tài)框。在模態(tài)框顯示或隱藏之前返回到主調(diào)函數(shù)中（也就是，在觸發(fā) shown.bs.modal 或 hidden.bs.modal 事件之前）。

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

.modal('hide')

手動隱藏模態(tài)框。在模態(tài)框隱藏之前返回到主調(diào)函數(shù)中（也就是，在觸發(fā) hidden.bs.modal 事件之前）。

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

事件

Bootstrap 的模態(tài)框類提供了一些事件用于監(jiān)聽并執(zhí)行你自己的代碼。

事件類型	描述
show.bs.modal	`show` 方法調(diào)用之后立即觸發(fā)該事件。如果是通過點擊某個作為觸發(fā)器的元素，則此元素可以通過事件的 `relatedTarget` 屬性進行訪問。
shown.bs.modal	此事件在模態(tài)框已經(jīng)顯示出來（并且同時在 CSS 過渡效果完成）之后被觸發(fā)。如果是通過點擊某個作為觸發(fā)器的元素，則此元素可以通過事件的 `relatedTarget` 屬性進行訪問。
hide.bs.modal	`hide` 方法調(diào)用之后立即觸發(fā)該事件。
hidden.bs.modal	此事件在模態(tài)框被隱藏（并且同時在 CSS 過渡效果完成）之后被觸發(fā)。
loaded.bs.modal	從`遠端的數(shù)據(jù)源`加載完數(shù)據(jù)之后觸發(fā)該事件。

上一篇：使用 Sass

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

模態(tài)框

不支持同時打開多個模態(tài)框

模態(tài)框的 HTML 代碼放置的位置

對于移動設(shè)備的附加說明

實例

靜態(tài)實例