使用bootstrap的JS插件實現模態框效果

在上一篇文章中，咱們使用 js+css 實現了模態框效果，在理解了模態框的基本實現方法和實現效果後，咱們就要尋找更快捷的方法，又快又好的來完成模態框開發需求，從而節約時間，提升效率。一個好的輪子，不只能大幅減輕工做量，並且能讓咱們的代碼更簡明和優雅。

今天咱們選擇使用著名的 bootstrap 庫的模態框插件 modal.js 來實現模態框效果，同時也使你們進一步熟悉 bootstrap 的插件使用。

一. bootstrap 的 js 插件的簡單介紹

1.引入

a. 引入所有JS插件

咱們在使用 bootstrap 庫時，引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件，這兩種文件都集成了 bootstrap 的全部插件，區別在於 *.min.js 是壓縮後的版本。

咱們在使用 bootstrap 的 js插件時不須要作更多的工做，只須要引入這兩個文件中的一個就能夠了，另外重要的信息是 bootstrap 的全部插件都依賴於 jquery 庫，因此在引入 bootstrap 的插件時，必須先引入 jquery 庫。

b.引入單個JS插件

若是隻使用 bootstrap庫的 某個插件，因此不想引入所有插件時，能夠選擇單獨引入某個插件。此種方法須要你有要使用的插件的單獨文件，bootstrap 共有 12 個 js 插件，你能夠到 github此處 下載使用每一個插件的單獨文件。

另外 bootstrap 有如下 12 個插件，你們能夠大概作個瞭解：

• 動畫過渡（Transitions）: transition.js
• 模態彈窗（Modal）: modal.js
• 下拉菜單（Dropdown）： dropdown.js
• 滾動偵測（Scrollspy）： scrollspy.js
• 選項卡（Tab）： tab.js
• 提示框（Tooltips）： tooltop.js
• 彈出框（Popover）： popover.js
• 警告框（Alert）： alert.js
• 按鈕（Buttons）： button.js
• 摺疊/手風琴（Collapse）： collapse.js
• 圖片輪播Carousel： carousel.js
• 自動定位浮標Affix： affix.js

2.引入插件的使用

a.經過 data 屬性 API

bootstrap 提供了一個很是方便的 API 來調用插件，那就是 data 屬性 。咱們不須要寫不少 js 代碼，只須要爲 HTML 標籤增長 data-* 屬性，就能夠調用 js 插件實現各類效果 。

例如咱們想爲按鈕綁定 下拉菜單效果，只須要爲按鈕添加 data-toggle="dropdown" 屬性，在點擊按鈕時，就會調用 dropdown 插件了。

b.經過 純JS API

固然咱們也可使用 bootstrap 提供的 純javascript API 來調用插件，例如爲 id 爲 test 的 按鈕綁定調用 dropdown 插件操做，可使用以下的 js 代碼：

$("#test").dropdown(option) /可帶選項參數option

 

二.模態框插件詳解

1.模態框的代碼結構

bootstrap 模態框插件是 modal.js 。使用的代碼結構樣式組件以下：

• .modal               模態框
• .modal-dialog    模態框主體
• .modal-content 模態框內容
• .modal-header  模態框內容頭部（標題）
• .modal-title        模態框標題
• .modal-body     模態框內容主要內容部分
• .modal-footer    模態框內容底部 （可放置操做按鈕等）

一個模態框的結構相似以下

 

<h1>模態框是個值得學習的好效果</h1>
<button class="btn btn-success" data-toggle="modal" data-target="#modalone" data-show="false">come on!</button>
<div class="modal fade" id="modalone">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">模態彈出窗標題</h4>
      </div>
      <div class="modal-body">
        <p>模態框主體</p>
      </div>
      <div class="modal-footer">
        <p style="display: inline-block;">模態框底部</p>
        <button class="btn btn-info">done</button>
      </div>
    </div>
  </div>
</div>
</div>

 

2.模態框插件的 data 屬性 API

a.必須的 data 屬性

以上代碼第一個按鈕的 data-toggle="modal" 表示 此按鈕爲模態框的觸發器，點擊時彈出模態框。另外也可使用 連接標籤 <a> 的 href 屬性代替 data-toggle 將連接<a> 做爲觸發器，但不推薦。

data-target="#modalone" 屬性表示 觸發的模態窗口 ID 爲 modalone 。一個頁面能夠有多個模態窗口觸發器，可是一個觸發器只能觸發對應的模態框，不能觸發多個模態框。

以上兩個 data 屬性是實現模態框效果必須的。

ps.

.fade 格式化類能夠爲模態框彈出添加過渡效果。

close 格式化類 和 data-dismiss 屬性配合能夠爲模態框添加關閉按鈕。

b.可選的 data 屬性

另外還有一些其餘可選的 data 屬性，能夠加強模態框的表現效果。以下：

• data-backdrop    是否包含一個背景 DIV 從而在單擊背景時關閉模態框，屬性值爲 true 時 包含， 爲 static 時不包含。
• data-keyboard    爲 true 時按下鍵盤 ESC 時模態框關閉，false時不關閉
• data-show           爲true時頁面加載後不顯示，爲false時顯示

3. 使用 JS 代碼 API

經過 JS 代碼調用插件帶 選項參數 也能夠達到與設置以上屬性相同的效果，代碼以下：

 

$(function () {
    $(".btn").click(function () {
        $("#modalone").modal({
            backdrop: false, // 至關於data-backdrop
            keyboard: false, // 至關於data-keyboard
            show: true, // 至關於data-show
            remote: "" // 至關於a標籤做爲觸發器的href
        });
    });
});

 

4.最終效果

最後，以上模態框代碼效果以下：

未點擊按鈕時：

 

點擊後：

一個簡單的模態框效果就製做完成了。

三.補充

1.純JS API 的方法

JS 代碼調用插件， .modal() 方法的參數除了能夠攜帶以上說起的 option 參數外，還能夠有如下幾個：

• .modal('toggle') 手動切換模態框
• .modal('show') 手動打開模態框
• .modal('hide') 手動關閉模態框

2.純JS API 的事件

同時，模態框插件還提供瞭如下幾個鉤子事件函數，能夠在JS代碼中使用來達到豐富模態框效果或添加更多功能的目的。

 

show.bs.modal	在show方法調用時當即觸發（還沒有顯示以前）；若是單擊了一個元素，那麼該元素將做爲事件relatedTarget事件
shown.bs.modal	該事件在模態窗徹底顯示給用戶以後（而且等CSS動畫完成以後）觸發；若是單擊了一個元素，那麼該元素將做爲事件relatedTarget事件
hide.bs.modal	在hide方法調用時（但還未關閉隱藏）當即觸發
hidden.bs.modal	該事件在模態彈出窗徹底隱藏以後（並CSS動畫漂亮完成以後）觸發

以上就是 bootstrap 的模態框插件的基本知識，但願你們喜歡。