bootstrap前端架構—模态框

1、什麼是模态框？

這裡說的模态框，其實就是指的在覆寫在父窗體上的子窗體。可用來做互動，其實經常我我們會看到模态框用來登入、确定等等互動，就比如這樣的：

這就是一個模态框，相信大家都差不多遇到，那到底是怎麼實作這種效果的呢，bootstrap已經為我們提供了相應的元件。

2、建立模态框

現在讓我們先看看bootstrap給我提供的模态框的基本結構，自己先看看最基本的代碼結構：

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" >
  <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close">&times;</button>
       <h4 class="modal-title">模态框（Modal）标題</h4>
     </div>
     <div class="modal-body">
       模态框主體内容
     </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><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

           

上面就是最簡單的模态框的結構，我們先一起看看代碼的大概意思：

modal：表示這是一個模态框；

fade：表示淡入淡出的效果；

modal-dialog ：表示使用者操作的視窗；

modal-content ：表示模态框的主體内容；

modal-header：表示模态框主體内容的頭部；

modal-title：表示模态頭部中的标題；

modal-body：表示模态框主體内容的主體部分；

modal-footer ：表示模态框主體内容的底部；

data-dismiss：這個屬性，表示關閉，使用jQuery實作關閉模态框的效果；

如果你直接複制了上面的代碼，是不是很奇怪咋沒有用？因為模态框預設是隐藏狀态，需要觸發事件，比如你點選某個按鈕，模态框就會彈出了，是以我們隻需要給模态框一個觸發條件：

上面我給了一個按鈕，通過點選按鈕來觸發模态框，先看看這個按鈕怎麼控制模态框：

data-target：表示指定操作id為myModal的模态框；

data-toggle：表示切換模态框的有隐藏和顯示（使用jQuery中的toggle方法）；

好了，這樣的話，一個模态框的基本結構已經完成，看看效果圖是怎麼樣的：

當我們完成了模态框暗暗高興的時候，卻發現随便點下模态框外面的蒙闆，模态框就消失了，這個好像和我們别的網站看到的很多模态框效果不一樣啊，别急，bootstrap還提供了很多class類實作不同的效果，我們一個一個慢慢看。

data-backdrop="static"：指定一個靜态的背景，當使用者點選模态框外部時不會關閉模态框（為false灰色蒙蔽效果會消失；預設為true）；

data-keyboard="true"：表示ESC健是否有效，不寫這個屬性，預設為true,必須添加tabindex="-1"才能生效（tabindex用來設定元素的tab健循序，要設定一個數字才能生效）；

具體的效果大家可以去嘗試下。

3、使用js操作模态框

bootstrap中的js操作都是有依賴jQuery，模态框一樣如此。

<button class="btn btn-warning" id="btn_modal">打開模态框</button>
<script>
        //點選顯示模态框
	$("#btn_modal").click(function(){
		$("#myModal").modal("show")
	})
        
        //點選隐藏模态框
//	$("#btn_modal").click(function(){
//		$("#myModal").modal("hide")
//	})

</script>

           

我們可以直接使用modal()方法，可以直接在modal()方法裡添加狀态；

模态框還為我們提供了幾種事件方法；

show.bs.modal：在調用 show 方法後觸發。例如：

$('#myModal').on('show.bs.modal', function () {
    alert("我要打開模态框")
})

           

shown.bs.modal：當模态框對使用者可見時觸發（将等待 CSS 過渡效果完成）。

$('#myModal').on('shown.bs.modal', function () {
  alert("我已經打開了模态框")
})

           

hide.bs.modal：當調用 hide 執行個體方法時觸發。

$('#myModal').on('hide.bs.modal', function () {
  alert("我要隐藏模态框")
})

           

hidden.bs.modal：當模态框完全對使用者隐藏時觸發。

$('#myModal').on('hidden.bs.modal', function () {
  alert("我要已經隐藏了模态框")
})

           

bootstrap提供的方法和class類大緻上就這些，可以根據實際的情況使用這些方法。