Bootstrap-v3-js插件-模态框

模态框 modal.js

模态框經過了優化，更加靈活，以彈出對話框的形式出現，具有最小和最實用的功能集。

模态框的特點：

不支援同時打開多個模态框（千萬不要在一個模态框上重疊另一個模态框。要想同時支援多個模态框，需要自己寫額外的代碼來實作。）

模态框的 HTML 代碼放置的位置（務必将模态框的 HTML 代碼放在文檔的最高層級内（也就是說，盡量作為 body 标簽的直接子元素），以避免其他元件影響模态框的展現和/或功能。）
對于移動裝置的附加說明（在移動裝置上使用模态框有一些額外要注意的事項。請參考對浏覽器的支援章節擷取更多資訊。）

1、模态框執行個體

點選下面的按鈕即可通過 JavaScript 啟動一個模态框。此模态框将從上到下、逐漸浮現到頁面前。

<!-- 模态聲明 -->
<div class="modal" id="myModal">
  <!-- 視窗聲明 -->
  <div class="modal-dialog">
    <!-- 内容聲明 -->
    <div class="modal-content">
      <!-- 模态框内容的頭部 -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title">模态框标題</h4>
      </div>
      <!-- 模态框内容的主體部 -->
      <div class="modal-body">
        <p>這是模态框的主題内容</p>
      </div>
      <!-- 模态框内容的底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default">取消</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 按鈕添加id -->
<button class="btn btn-primary" id="openModal">彈出模态框</button>

<!-- 通過js程式設計方式調用模态框 -->
<script>
 $(function(){
  $('#openModal').on('click',function(){
    $('#myModal').modal();
  });
 }); 
</script>

2、模态框尺寸

模态框提供了兩個可選尺寸，通過為

.modal-dialog

增加一個樣式調整類實作。

modal-lg 表示大尺寸模态框
modal-sm 表示小尺寸模态框

<!-- 視窗聲明 大尺寸模态框-->
  <div class="modal-dialog modal-lg">

<!-- 視窗聲明 小尺寸模态框-->
  <div class="modal-dialog modal-sm">

3、模态框動畫

通過為.modal添加模态動畫類（例如.fade表示淡入淡出），可實作模态框顯示相應的動畫效果。

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">

4、模态框使用網格系統顯示

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">
  <!-- 視窗聲明 -->
  <div class="modal-dialog">
    <!-- 内容聲明 -->
    <div class="modal-content">
      <!-- 模态框内容的頭部 -->
      <div class="modal-header">
        <!-- data-dismiss表示關閉插件modal -->
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title">模态框标題</h4>
      </div>
      <!-- 模态框内容的主體部 -->
      <div class="modal-body">
        <p>這是模态框的主題内容</p>
        <!-- 水準方向排列的表單 -->
        <div class="form-horizontal">
          <!-- 表單組1 -->
          <div class="form-group">
            <label class="col-sm-3">使用者名</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" placeholder="請輸入使用者名">
            </div>
            <label class="col-sm-3 control-label text-danger">*不可為空</label>
          </div>
          <!-- 表單組2 -->
           <div class="form-group">
            <label class="col-sm-3">密碼</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" placeholder="請輸入密碼">
            </div>
            <label class="col-sm-3 control-label text-danger">*不可為空</label>
          </div>         
        </div>
       </div>
      <!-- 模态框内容的底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 按鈕添加id -->
<button class="btn btn-primary" id="openModal">彈出模态框</button>
<!-- 通過js程式設計方式調用模态框 -->
<script>
 $(function(){
  $('#openModal').on('click',function(){
    $('#myModal').modal();
  });
 }); 
</script>

5、模态框的調用

通過 data 屬性或 JavaScript 調用模态框插件，可以根據需要動态展示隐藏的内容。模态框彈出時還會為

<body>

元素添加

.modal-open

類，進而覆寫頁面預設的滾動行為，并且還會自動生成一個

.modal-backdrop

元素用于提供一個可點選的區域，點選此區域就即可關閉模态框。

5.1 通過JavaScript 調用

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">
...
</div>

<!-- 按鈕添加id -->
<button class="btn btn-primary" id="openModal">彈出模态框</button>

<!-- 通過js程式設計方式調用模态框 -->
<script>
 $(function(){
  $('#openModal').on('click',function(){
    $('#myModal').modal();    //js調用模态框
  });
 }); 
</script>

5.2 通過data屬性

先使用data-toggle來指定調用元件類型（調用modal元件），然後通過data-target指定調用哪一個modal元件（id為myModal的元件）

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">
...
</div>

<!-- 通過data屬性調用模态框 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">彈出模态框(通過data屬性)</button>

6、模态框的參數

可以将選項通過 data 屬性或 JavaScript 代碼傳遞。模态框的參數包括如下：

backdrop：表示模态框的透明背景底色（預設為true或“static”）
keyboard：表示鍵盤上的 esc 鍵被按下時關閉模态框（預設為true）
show：表示模态框初始化之後就立即顯示出來（預設為true）
remote：表示加載位址（預設為false）

6.1 通過JavaScript寫法設定參數

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">
...
</div>

<!-- 按鈕添加id -->
<button class="btn btn-primary" id="openModal">彈出模态框</button>

<!-- 通過js程式設計方式調用模态框 -->
<script>
 $(function(){
  $('#openModal').on('click',function(){
    $('#myModal').modal({ //調用模态框 并設定參數
      backdrop:false,
      keyboard:true,
      show:true
    });  
  });
 }); 
</script>

6.1 通過data屬性寫法設定參數

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">
...
</div>

<!-- 通過data屬性調用模态框 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="false" data-keyboard="true" data-show="true">彈出模态框(通過data屬性)</button>

7、模态框的方法

7.1 通過JavaScript寫法設定模态框方法

7.1.1 模态框的show方法

手動打開模态框。

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">
...
</div>

<!-- 模态框的方法 -->
<button class="btn btn-primary" id="btnShow">模态框show方法</button>

<!-- 通過js程式設計方式調用模态框 -->
<script>
  // 模态框show方法
  $('#btnShow').on('click',function(){
    $('#myModal').modal('show');  //調用show方法 顯示模态框
  })
 }); 
</script>

7.1.2 模态框的toggle方法

手動打開或關閉模态框。

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">
...
</div>

<!-- 模态框的方法 -->
<button class="btn btn-primary" id="btnToggle">模态框toggle方法</button>

<!-- 通過js程式設計方式調用模态框 -->
<script>
  //模态框toggle方法
  $('#btnToggle').on('click',function(){
    $('#myModal').modal('toggle');  //調用toggle方法 切換顯示模态框
  })
 }); 
</script>

7.1.3 模态框的show和hide方法

實作效果：打開按鈕顯示模态框，2s後自動隐藏模态框。

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">
...
</div>

<!-- 模态框的方法 -->
<button class="btn btn-primary" id="btnShowToHide">模态框打開2秒後隐藏模态框方法</button>

<!-- 通過js程式設計方式調用模态框 -->
<script>
  //模态框show和hide方法
  $('#btnShowToHide').on('click',function(){
    $('#myModal').modal('show');  //調用show方法 顯示模态框
    setTimeout(function(){
      $('#myModal').modal('hide');  //2秒後調用hide方法 隐藏模态框
    },2000);
  })
 }); 
</script>

8、模态框的事件

Bootstrap 的模态框類提供了一些事件用于監聽并執行你自己的代碼。

show.bs.modal 模态框顯示之前（show方法調用之後立即觸發該事件）
shown.bs.modal 模态框顯示之後（此事件在模态框已經顯示出來（并且同時在 CSS 過渡效果完成）之後被觸發）
hide.bs.modal 模态框被關閉之前（hide方法調用之後立即觸發該事件）
hidden.bs.modal 模态框被關閉之後（此事件在模态框被隐藏（并且同時在 CSS 過渡效果完成）之後被觸發）

<!-- 模态聲明 -->
<div class="modal fade" id="myModal">
...
</div>

<!-- 調用模态框 -->
<button class="btn btn-primary" id="openModal" >彈出模态框(通過js程式設計)</button>

<!-- 通過js程式設計方式調用模态框 -->
<script>
 $(function(){
  // 模态框事件
  $('#myModal').on('show.bs.modal',function(){
      alert('模态框即将被顯示');
    });
  $('#myModal').on('shown.bs.modal',function(){
      alert('模态框已經顯示');
    });
  $('#myModal').on('hide.bs.modal',function(){
      alert('模态框即将被隐藏');
    });
  $('#myModal').on('hidden.bs.modal',function(){
      alert('模态框已經隐藏');
    });
 }); 
</script>

完整的代碼

1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4       <!-- HTML5文檔類型 -->
  5     <meta charset="utf-8">
  6     <!-- 移動端适配 -->
  7     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8     <!-- 讓IE浏覽器使用最新的引擎渲染頁面 -->
  9     <mata http-equiv="X-UA-Compatible" content="IE=edge">
 10     <!-- Bootstrap3核心css庫 -->
 11     <link rel="stylesheet" href="css/bootstrap-v3.css">
 12     <!-- jquery核心js庫 -->
 13     <script src="js/jquery.js"></script>
 14     <!-- Bootstrap3核心js庫 -->
 15     <script src="js/bootstrap-v3.js"></script>
 16     <title>bootstrap插件</title>
 17     <style>
 18       body{
 19         padding: 20px;
 20       }
 21     </style>
 22   </head>
 23   <body>
 24     <!-- 模态框 -->
 25 
 26     <!-- 模态聲明 -->
 27     <div class="modal fade" id="myModal">
 28       <!-- 視窗聲明 -->
 29       <div class="modal-dialog">
 30         <!-- 内容聲明 -->
 31         <div class="modal-content">
 32           <!-- 模态框内容的頭部 -->
 33           <div class="modal-header">
 34             <!-- data-dismiss表示關閉插件modal -->
 35             <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
 36             <h4 class="modal-title">模态框标題</h4>
 37           </div>
 38           <!-- 模态框内容的主體部 -->
 39           <div class="modal-body">
 40             <p>這是模态框的主題内容</p>
 41             <!-- 水準方向排列的表單 -->
 42             <div class="form-horizontal">
 43               <!-- 表單組1 -->
 44               <div class="form-group">
 45                 <label class="col-sm-3">使用者名</label>
 46                 <div class="col-sm-6">
 47                   <input type="text" class="form-control" placeholder="請輸入使用者名">
 48                 </div>
 49                 <label class="col-sm-3 control-label text-danger">*不可為空</label>
 50               </div>
 51               <!-- 表單組2 -->
 52                <div class="form-group">
 53                 <label class="col-sm-3">密碼</label>
 54                 <div class="col-sm-6">
 55                   <input type="password" class="form-control" placeholder="請輸入密碼">
 56                 </div>
 57                 <label class="col-sm-3 control-label text-danger">*不可為空</label>
 58               </div>         
 59             </div>
 60            </div>
 61           <!-- 模态框内容的底部 -->
 62           <div class="modal-footer">
 63             <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
 64             <button type="button" class="btn btn-primary">确定</button>
 65           </div>
 66         </div>
 67       </div>
 68     </div>
 69 
 70     <!-- 調用模态框的兩種方式 -->
 71     <!-- 按鈕添加id -->
 72     <button class="btn btn-primary" id="openModal" >彈出模态框(通過js程式設計)</button>
 73 
 74     <!-- 通過data屬性調用模态框 -->
 75     <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="false" data-keyboard="true" data-show="true">彈出模态框(通過data屬性)</button>
 76 
 77     <!-- 模态框的方法 -->
 78     <button class="btn btn-primary" id="btnShow">模态框show方法</button>
 79 
 80     <!-- 模态框的方法 -->
 81     <button class="btn btn-primary" id="btnToggle">模态框toggle方法</button>
 82 
 83     <!-- 模态框的方法 -->
 84     <button class="btn btn-primary" id="btnShowToHide">模态框打開2秒後隐藏模态框方法</button>
 85 
 86     <!-- 通過js程式設計方式調用模态框 -->
 87     <script>
 88      $(function(){
 89       //模态框參數設定
 90       $('#openModal').on('click',function(){
 91         $('#myModal').modal({ //調用模态框 并設定參數
 92           backdrop:false,
 93           keyboard:true,
 94           show:true
 95         });  
 96       });
 97       // 模态框show方法
 98       $('#btnShow').on('click',function(){
 99         $('#myModal').modal('show');  //調用show方法 顯示模态框
100       })
101       //模态框toggle方法
102       $('#btnToggle').on('click',function(){
103         $('#myModal').modal('toggle');  //調用toggle方法 切換顯示模态框
104       })
105       //模态框show和hide方法
106       $('#btnShowToHide').on('click',function(){
107         $('#myModal').modal('show');  //調用show方法 顯示模态框
108         setTimeout(function(){
109           $('#myModal').modal('hide');  //2秒後調用hide方法 隐藏模态框
110         },2000);
111       })
112       // 模态框事件
113       $('#myModal').on('show.bs.modal',function(){
114           alert('模态框即将被顯示');
115         });
116       $('#myModal').on('shown.bs.modal',function(){
117           alert('模态框已經顯示');
118         });
119       $('#myModal').on('hide.bs.modal',function(){
120           alert('模态框即将被隐藏');
121         });
122       $('#myModal').on('hidden.bs.modal',function(){
123           alert('模态框已經隐藏');
124         });
125      }); 
126     </script>
127   </body>
128 </html>

Bootstrap-v3-js插件-模态框

1、模态框執行個體

2、模态框尺寸

3、模态框動畫

4、模态框使用網格系統顯示

5、模态框的調用

5.1 通過JavaScript 調用

5.2 通過data屬性

6、模态框的參數

6.1 通過JavaScript寫法設定參數

6.1 通過data屬性寫法設定參數

7、模态框的方法

7.1 通過JavaScript寫法設定模态框方法

7.1.1 模态框的show方法

7.1.2 模态框的toggle方法

7.1.3 模态框的show和hide方法

8、模态框的事件

繼續閱讀

HDU 4719 Oh My Holy FFF

CSU 1561 (More) Multiplication

CSU 1563 Lexicography

HDU 4721 Food and Productivity

ZOJ 1041 Transmitters

CSU 1562 Fun House

CodeChef PALPROB Palindromeness

UVA 10344- 23 out of 5

ZOJ 1104 Leaps Tall Buildings

HDU 2821 Pusher

UVA 1401 Remember the Word

ZOJ 2748 Free Kick

CSU 1567 Reverse Rot

JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介

UVA 519 Puzzle (II)

磁盤結構及在Linux中的命名