4.1七、Bootstrap V4自學之路-----組件---模態框

時間  2019-11-10
標籤 4.1 bootstrap v4 自學 之路 組件 模態 欄目 Bootstarp 简体版
原文   原文鏈接


因爲HTML5定義了它的語義，autofocus HTML 屬性在Bootstrap模態框中產生不了影響。爲了實現一樣的效果，使用一些自定義JavaScript：javascript

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

確保不要在一個模態框還可見的時候打開另外一個模態框。在同一時候顯示超過一個模態框，須要自定義代碼。html

儘量把一個模態框的HTML代碼始終放置在document的頂層位置，以免別的組件影響模態框的外觀以及功能。java

這裏有一些在移動設備上使用模態框的警告，欲知詳情，請看瀏覽器支持文檔。bootstrap

靜態例子

一個經渲染的模態框，帶有頭、主體，以及有一些操做功能的腳。瀏覽器

這段代碼調試失敗了，怎麼也不顯像。或許是缺乏東西吧。ide

Modle僞代碼部分：函數

《div class="modal fade"》<br>
--| 《div class="modal-dialog" role="document"》<br>
--| --| 《div class="modal-content"》<br>
--| --| --| 《div class="modal-header"》<br>
--| --| --| --|《button class="class"》<br>
--| --| --| --|《h4 class="modal-title"》<br>
--| --| --| --|《.除了按鈕和title應該就沒了吧..》<br>
--| --| --| 《div class="modal-body"》<br>
--| --| --| --|《..主題內容.》<br>
--| --| --| 《div class="modal-footer"》<br>
--| --| --| --|《.通常是按鈕..》

現場演示

利用JavaScript，經過點擊下面的按鈕，切換一個模態框。它將從網頁頂上滑下來，並淡入。動畫

<!-- 按鈕觸發模型 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模態框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        《div class="modal fade"》 <br>
        --| 《div class="modal-dialog" role="document"》<br>
        --| --| 《div class="modal-content"》<br>
        --| --| --| 《div class="modal-header"》<br>
        --| --| --| --|《button class="class"》<br>
        --| --| --| --|《h4 class="modal-title"》<br>
        --| --| --| --|《.除了按鈕和title應該就沒了吧..》<br>
        --| --| --| 《div class="modal-body"》<br>
        --| --| --| --|《..主題內容.》<br>
        --| --| --| 《div class="modal-footer"》<br>
        --| --| --| --|《.通常是按鈕..》
      </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>

PS：出發模態框的按鈕能夠在CSS中，根據文檔內容介紹，模態框的位置應該至於html最頂層。ui

二貨的我放在了<!DOCTYPE html>上一行，結果ID不認。太二了。spa

理論應當放置於<body>下的第一行。

可選的尺寸

模態框有兩種可選的尺寸，利用修飾類放在.modal-dialog上就可用了。


<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#Demo01">Large modal</button>

<div class="modal fade" id="Demo01" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        《div class="modal fade"》\
        --| 《div class="modal-dialog modal-lg"》<!-- 在這裏添加 modal-lg -->
        --| 《div class="modal-content"》
        --| --| 《 ... 只是想起來.modal-content裏面有  .modal-header modal-body modal-footer 。》
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Demo02">Small modal</button>

<div class="modal fade" id="Demo02" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        《div class="modal fade"》\
        --| 《div class="modal-dialog modal-sm"》<!-- 在這裏添加 modal-sm -->
        --| 《div class="modal-content"》
        --| --| 《 ... 只是想起來.modal-content裏面有  .modal-header modal-body modal-footer 。》
    </div>
  </div>
</div>

PS：背景圖有第一個按鈕的樣子，是我忘記刪掉了。另外第一個按鈕爲何這麼大呢？由於那個按鈕使用了 .btn-lg類。

PS：這裏和文檔代碼不一樣，按鈕的 data-target=".類" 也能夠是 "#id"

移除動畫

若是模態框僅要求它出現，可是不要淡出淡入效果，只需從模態框標記上移除.fade類。

<div class="modal" id="Demo02" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

請看最外層 class屬性中，.fade類刪掉了。效果就感受稍微有些生硬了。

使用網格系統

爲了在模態框中使用Bootstrap的網格系統，只須要在.modal-body內部嵌套一個container-fluid，而後在該容器中使用普通的網格系統類。

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
    Launch demo modal
</button>

<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
  <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="gridModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid bd-example-row">
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              Level 1: .col-sm-9
              <div class="row">
                <div class="col-xs-8 col-sm-6">
                  Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6">
                  Level 2: .col-xs-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </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>

PS：這裏要注意的是，模態框內的.modal-body 裏，加入 .container-fluid。

    若是不加，直接使用.row。我感受也沒有什麼不一樣。

基於觸發按鈕的多樣化模態框

有幾個按鈕觸發一樣的模態框，只是內容有一些不一樣？使用event.relatedTarget以及HTML的data-* 屬性根據點擊的是哪一個按鈕，多樣化模態框的內容。參閱relatedTarget以增進對模態框事件的瞭解。

<div class="bd-example">
  <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">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title" id="exampleModalLabel">New message</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">Recipient:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-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>
</div>

不知道你們注意到沒有，3個按鈕指向的都是同一個模態框。但如何區分呢？請看按鈕上的data-whatever屬性。data能夠經過JS取得。建議請看文檔第一章起步的javascript小節。

高度不固定的模態框

若是一個模態框在打開時，高度發生變化，萬一出現了滾動條，你必須調用$('#myModal').data('bs.modal').handleUpdate()以調整模態框的位置。

這裏我想，若是實際用到的話，能夠使用JQ監聽。雖然可能性很小。

另一種狀況，<textarea>標籤能夠設定max-height。當超出max-height時<textarea>自身出現滾動條。

用途

模態框插件利用data屬性或者JavaScript，根據須要切換隱藏的內容。它還向<body>添加了.modal-open類以覆蓋默認的滾動行爲，並生成一個.modal-backdrop類以提供一個點擊區域，當在模態框的外面點擊就能夠抹除顯示的模態框。

利用data屬性

不用寫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)

這裏注意，這是一個泛指。options應該有一個具體的值。

選項

選項能夠經過數據屬性或JavaScript。對於數據屬性，附加的選項名data-，如在data-backdrop=""。

名稱 類型 默認值 描述
backdrop 布爾值或字符串static true 包括了一些modal-backdrop元素。做爲替補，爲一個backdrop指定值static，單擊的時候就不會關閉模態框。
keyboard 布爾值 true 在按下Esc鍵的時候關閉模態框。
show 布爾值 true 在初始化的時候顯示該模態框。

方法

.modal(options)

把某塊內容做爲模態框激活。接受一個可選的參數object。

$('#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')

事件

Bootstrap的模態框類爲模態框相關的回調函數提供了事件接口。全部的模態框事件都能由模態框自身觸發。

事件類型 描述
show.bs.modal 當調用show實例方法時，會當即觸發該事件。若是是由點擊引發的，被點擊的元素是可用的，成爲Event對象的relatedTarget屬性。
shown.bs.modal 當模態框對用戶來講可見時（須要等待CSS過渡完成），會觸發該事件。若是是由點擊引發的，被點擊的元素是可用的，成爲Event對象的relatedTarget屬性。
hide.bs.modal 當調用hide實例方法時，會當即觸發該事件。
hidden.bs.modal 當模態框對用戶來講終於完成隱藏時（須要等待CSS過渡完成），會觸發該事件。
loaded.bs.modal 當模態框使用remote選項完成內容載入時，會當即觸發該事件。 
$('#myModal').on('hidden.bs.modal', function (e) {
   // do something... 
})
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程