今天我們選擇使用著名的 bootstrap 庫(kù)的模態(tài)框插件 modal.js 來(lái)實(shí)現(xiàn)模態(tài)框效果，同時(shí)也使大家進(jìn)一步熟悉 bootstrap 的插件使用。

一. bootstrap 的 js 插件的簡(jiǎn)單介紹

1.引入

我們?cè)谑褂?bootstrap 庫(kù)時(shí)，引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件，這兩種文件都集成了 bootstrap 的所有插件，區(qū)別在于 *.min.js 是壓縮后的版本。

我們?cè)谑褂?bootstrap 的 js插件時(shí)不需要做更多的工作，只需要引入這兩個(gè)文件中的一個(gè)就可以了，另外重要的信息是 bootstrap 的所有插件都依賴(lài)于 jquery 庫(kù)，所以在引入 bootstrap 的插件時(shí)，必須先引入 jquery 庫(kù)。

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

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

• 動(dòng)畫(huà)過(guò)渡（Transitions）: transition.js
• 模態(tài)彈窗（Modal）: modal.js
• 下拉菜單（Dropdown）： dropdown.js
• 滾動(dòng)偵測(cè)（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
• 自動(dòng)定位浮標(biāo)Affix： affix.js

2.引入插件的使用

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

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

當(dāng)然我們也可以使用 bootstrap 提供的 純javascript API 來(lái)調(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)容底部 （可放置操作按鈕等）

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

<h1>模態(tài)框是個(gè)值得學(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">&times;</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>

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

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

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

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

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

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

• data-backdrop    是否包含一個(gè)背景 DIV 從而在單擊背景時(shí)關(guān)閉模態(tài)框，屬性值為 true 時(shí) 包含， 為 static 時(shí)不包含。
• data-keyboard    為 true 時(shí)按下鍵盤(pán) ESC 時(shí)模態(tài)框關(guān)閉，false時(shí)不關(guān)閉
• data-show           為true時(shí)頁(yè)面加載后不顯示，為false時(shí)顯示

通過(guò) 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)擊按鈕時(shí)：

點(diǎn)擊后：

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

三.補(bǔ)充

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

• .modal('toggle') 手動(dòng)切換模態(tài)框
• .modal('show') 手動(dòng)打開(kāi)模態(tài)框
• .modal('hide') 手動(dòng)關(guān)閉模態(tài)框

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

以上所述是小編給大家介紹的使用bootstrap插件實(shí)現(xiàn)模態(tài)框效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論