快捷導(dǎo)航

Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框(16)

更新時(shí)間：2016年12月08日 09:21:00 作者：kikay

這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Bootstrap自帶了很多JQuery插件，給用戶做前端開(kāi)發(fā)提供了很大的方便。對(duì)于每一個(gè)插件，有2種引用方式：一是單獨(dú)引用，即使用Bootstrap的單獨(dú)*.js文件，這種方式需要注意的是一些插件和CSS組件可能依賴其他插件，所以單獨(dú)引用的時(shí)候，需要弄清楚這種包含關(guān)系一并引用；二是直接引用完整的bootstrap.js或者壓縮版的bootstrap.min.js，需要注意的是不能同時(shí)引用這2個(gè)文件。

Bootstrap自帶了很多基本的插件，包括模態(tài)對(duì)話框、標(biāo)簽切換、Tooltip提示工具等。首先來(lái)總結(jié)下模態(tài)對(duì)話框的使用。

0x01基本樣式

模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來(lái)自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開(kāi)父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等。Bootstrap Modals（模態(tài)框）是使用定制的JQuery插件創(chuàng)建的。它可以用來(lái)創(chuàng)建模態(tài)窗口豐富用戶體驗(yàn)，或者為用戶添加實(shí)用功能。
下面是一個(gè)基本樣式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>模態(tài)對(duì)話框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>模態(tài)對(duì)話框基本</h1>
 </div>
 <button type="button" id="Open" class="btn btn-primary btn-lg btn-mymodal" data-toggle="modal"
   data-target="#myModal">
  打開(kāi)模態(tài)框
 </button>
 <div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
     <h4 class="modal-title" id="myModalLabel">標(biāo)題</h4>
    </div>
    <div class="modal-body">內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
     <button type="button" class="btn btn-primary">提交</button>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

效果如下：

幾點(diǎn)說(shuō)明：

（1）使用模態(tài)窗口，需要有某種觸發(fā)器，可以使用按鈕或鏈接。這里我們使用的是按鈕。
（2）data-target="#myModal" 是想要在頁(yè)面上加載的模態(tài)框的目標(biāo)。
（3）在模態(tài)框中需要注意兩點(diǎn)：一是.modal，用來(lái)把 <div> 的內(nèi)容識(shí)別為模態(tài)框；二是 .fade class。當(dāng)模態(tài)框被切換時(shí)，它會(huì)引起內(nèi)容淡入淡出。
（4）<div class="modal-header">，modal-header 是為模態(tài)窗口的頭部定義樣式的類。
（5）class="close"，close 是一個(gè) CSS class，用于為模態(tài)窗口的關(guān)閉按鈕設(shè)置樣式。
（6）data-dismiss="modal"，是一個(gè)自定義的 HTML5 data 屬性。在這里它被用于關(guān)閉模態(tài)窗口。
（7）class="modal-body"，是 Bootstrap CSS 的一個(gè) CSS class，用于為模態(tài)窗口的主體設(shè)置樣式。
（8）class="modal-footer"，是 Bootstrap CSS 的一個(gè) CSS class，用于為模態(tài)窗口的底部設(shè)置樣式。
（9）data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用于打開(kāi)模態(tài)窗口。

0x02 JS方式加載

除了上面通過(guò)屬性方式加載外，還可以通過(guò)JS方式加載模態(tài)對(duì)話框，下面是一個(gè)用戶登錄界面的簡(jiǎn)單實(shí)現(xiàn)：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <style>
  .col-center-block{
   float: none;
   display: block;
   margin-left: auto;
   margin-right: auto;
  }
 </style>
 <title>js加載例子</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>js加載模態(tài)對(duì)話框</h1>
 </div>
 <div>
  <button type="button" class="btn btn-lg btn-primary btn-myModal" data-toggle="modal">彈出對(duì)話框</button>
  <div id="myModal" class="modal fade">
   <div class="modal-dialog" style="width: 20%">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">用戶登錄</h4>
     </div>
     <div class="modal-body">
      <div>
       <form>
        <div class="form-group">
         <label class="control-label" for="UserName">用戶名</label>
         <input type="text" class="form-control" id="UserName" placeholder="用戶名">
        </div>
        <div class="form-group">
         <label class="control-label" for="Password">密碼</label>
         <input type="password" class="form-control" id="Password" placeholder="密碼">
        </div>
        <div class="form-group">
         <label>
          <input type="checkbox"> 下次自動(dòng)登錄
         </label>
         <a href="#" class="pull-right">忘記密碼</a>
        </div>
        <div class="form-group">
         <button type="submit" class="btn btn-primary form-control">登錄</button>
        </div>
       </form>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
<script>
 $(function () {
  $(".btn-myModal").click(function () {
   $("#myModal").modal({
    keyboard:true,
//    remote:"../Alerts.html"
   })
  })
  $("#myModal").on("hidden.bs.modal",function () {
//   alert('test');
  })
 })
</script>
</body>
</html>

效果如下：

上面的例子包含了JS加載modal的過(guò)程，也包括了設(shè)置模態(tài)對(duì)話框?qū)挾?、響?yīng)事件等內(nèi)容。modal方法結(jié)合一些參數(shù)來(lái)實(shí)現(xiàn)特殊效果：

（1）把內(nèi)容作為模態(tài)框激活。接受一個(gè)可選的選項(xiàng)對(duì)象：

$("#myModal").modal({
keyboard:true,
})

（2）狀態(tài)切換

$("#myModal").modal('toggle') //手動(dòng)打開(kāi)模態(tài)框。
$("#myModal").modal('hide') //手動(dòng)隱藏模態(tài)框。

0x03 事件

Bootstrap模態(tài)對(duì)話框還定義了事件，通過(guò)“鉤子”的方式調(diào)用：

（1）show.bs.modal
在調(diào)用 show 方法后觸發(fā)：

$('#myModal').on('show.bs.modal', function () {
 // 執(zhí)行一些動(dòng)作...
})

（2）shown.bs.modal
當(dāng)模態(tài)框?qū)τ脩艨梢?jiàn)時(shí)觸發(fā)（將等待 CSS 過(guò)渡效果完成）：

$('#myModal').on('shown.bs.modal', function () {
// 執(zhí)行一些動(dòng)作...
})

（3）hide.bs.modal
當(dāng)調(diào)用 hide 實(shí)例方法時(shí)觸發(fā)：

$('#myModal').on('hide.bs.modal', function () {
 // 執(zhí)行一些動(dòng)作...
})

（4）hidden.bs.modal
當(dāng)模態(tài)框完全對(duì)用戶隱藏時(shí)觸發(fā)：

$('#myModal').on('hidden.bs.modal', function () {
 // 執(zhí)行一些動(dòng)作...
})

上面用戶登錄的例子中事件部分代碼：

$("#myModal").on("hidden.bs.modal",function () {
  alert('test');
 })

當(dāng)模態(tài)框完全對(duì)用戶隱藏時(shí)，就會(huì)調(diào)用執(zhí)行這段JS代碼。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框(16)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具