本文和大家分享的主要是使用bootstrap 庫的模態(tài)框插件 modal.js 來實(shí)現(xiàn)模態(tài)框效果相關(guān)內(nèi)容，同時也使大家進(jìn)一步熟悉 bootstrap 的插件使用，一起來看看吧，希望對大家學(xué)習(xí)bootstrap有所幫助。

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

　　1.引入

　　我們在使用 bootstrap 庫時，引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件，這兩種文件都集成了 bootstrap 的所有插件，區(qū)別在于 *.min.js 是壓縮后的版本。

　　我們在使用 bootstrap 的 js插件時不需要做更多的工作，只需要引入這兩個文件中的一個就可以了，另外重要的信息是 bootstrap 的所有插件都依賴于 jquery 庫，所以在引入 bootstrap 的插件時，必須先引入 jquery 庫。

　　如果只使用 bootstrap庫的 某個插件，所以不想引入全部插件時，可以選擇單獨(dú)引入某個插件。此種方法需要你有要使用的插件的單獨(dú)文件，bootstrap 共有 12 個 js 插件，你可以到 github此處 下載使用每個插件的單獨(dú)文件。

　　另外 bootstrap 有以下 12 個插件，大家可以大概做個了解：

　　· 動畫過渡（Transitions）: transition.js

　　· 模態(tài)彈窗（Modal）: modal.js

　　· 下拉菜單（Dropdown）： dropdown.js

　　· 滾動偵測（Scrollspy）： scrollspy.js

　　· 選項(xiàng)卡（Tab）： tab.js

　　· 提示框（Tooltips）： tooltop.js

　　· 彈出框（Popover）： popover.js

　　· 警告框（Alert）： alert.js

　　· 按鈕（Buttons）： button.js

　　· 折疊/手風(fēng)琴（Collapse）： collapse.js

　　· 圖片輪播Carousel： carousel.js

　　· 自動定位浮標(biāo)Affix： affix.js

　　2.引入插件的使用

　　bootstrap 提供了一個非常方便的 API 來調(diào)用插件，那就是 data 屬性 。我們不需要寫很多 js 代碼，只需要為 HTML 標(biāo)簽增加 data-* 屬性，就可以調(diào)用 js 插件實(shí)現(xiàn)各種效果 。

　　例如我們想為按鈕綁定 下拉菜單效果，只需要為按鈕添加 data-toggle="dropdown" 屬性，在點(diǎn)擊按鈕時，就會調(diào)用 dropdown 插件了。

　　當(dāng)然我們也可以使用 bootstrap 提供的 純javascript API 來調(diào)用插件，例如為 id 為 test 的 按鈕綁定調(diào)用 dropdown 插件操作，可以使用如下的 js 代碼：

　　$("#test").dropdown(option) /可帶選項(xiàng)參數(shù)option

　　二.模態(tài)框插件

　　bootstrap 模態(tài)框插件是 modal.js 。使用的樣式組件如下：

　　· .modal               模態(tài)框

　　· .modal-dialog    模態(tài)框主體

　　· .modal-content 模態(tài)框內(nèi)容

　　· .modal-header  模態(tài)框內(nèi)容頭部（標(biāo)題）

　　· .modal-title        模態(tài)框標(biāo)題

　　· .modal-body     模態(tài)框內(nèi)容主要內(nèi)容部分

　　· .modal-footer    模態(tài)框內(nèi)容底部 （可放置操作按鈕等）

　　一個模態(tài)框的結(jié)構(gòu)類似如下

<h1>模態(tài)框是個值得學(xué)習(xí)的好效果</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">×</span>

        </button>

        <h4 class="modal-title">模態(tài)彈出窗標(biāo)題</h4>

      </div>

      <div class="modal-body">

        <p>模態(tài)框主體</p>

      </div>

      <div class="modal-footer">

        <p style="display: inline-block;">模態(tài)框底部</p>

        <button class="btn btn-info">done</button>

      </div>

    </div>

  </div>

</div>

</div>

　　第一個按鈕的 data-toggle ="modal" 表示 此按鈕為模態(tài)框的觸發(fā)器，點(diǎn)擊時彈出模態(tài)框。另外也可以使用 鏈接標(biāo)簽 的 href 屬性代替 data-toggle 將鏈接 作為觸發(fā)器，但不推薦。

　　data-target ="#modalone" 屬性表示 觸發(fā)的模態(tài)窗口 ID 為 modalone 。一個頁面可以有多個模態(tài)窗口觸發(fā)器，但是一個觸發(fā)器只能觸發(fā)對應(yīng)的模態(tài)框，不能觸發(fā)多個模態(tài)框。

　　以上兩個 data 屬性是實(shí)現(xiàn)模態(tài)框效果必須的。

　　fade 格式化類可以為模態(tài)框彈出添加過渡效果。

　　close 格式化類 和 data-dismiss 屬性配合可以為模態(tài)框添加關(guān)閉按鈕。

　　另外還有一些其他可選的 data 屬性，可以增強(qiáng)模態(tài)框的表現(xiàn)效果。如下：

　　· data-backdrop    是否包含一個背景 DIV 從而在單擊背景時關(guān)閉模態(tài)框，屬性值為 true 時 包含， 為 static 時不包含。

　　· data-keyboard    為 true 時按下鍵盤 ESC 時模態(tài)框關(guān)閉，false時不關(guān)閉

　　· data-show           為true時頁面加載后不顯示，為false時顯示

　　通過 JS 代碼調(diào)用插件帶 選項(xiàng)參數(shù) 也可以達(dá)到與設(shè)置以上屬性相同的效果，代碼如下：

　　$(function () {

　　$(".btn").click(function () {

　　$("#modalone").modal({

　　backdrop: false, // 相當(dāng)于data-backdrop

　　keyboard: false, // 相當(dāng)于data-keyboard

　　show: true, // 相當(dāng)于data-show

　　remote: "" // 相當(dāng)于a標(biāo)簽作為觸發(fā)器的href

　　});

　　});

　　});

　　最后，以上模態(tài)框代碼效果如下：

　　未點(diǎn)擊按鈕時：

 

 點(diǎn)擊后：

 

　　一個簡單的模態(tài)框效果就制作完成了。

　　三.補(bǔ)充

　　JS 代碼調(diào)用插件， .modal() 方法的參數(shù)除了可以攜帶以上提及的 option 參數(shù)外，還可以有以下幾個：

　　· .modal('toggle') 手動切換模態(tài)框

　　· .modal('show') 手動打開模態(tài)框

　　· .modal('hide') 手動關(guān)閉模態(tài)框

　　同時，模態(tài)框插件還提供了以下幾個鉤子事件函數(shù)，可以在JS代碼中使用來達(dá)到豐富模態(tài)框效果或添加更多功能的目的。

 

 

來源：博客園