Bootstrap之：模態窗口

Bootstrap提供了單獨的js文件來提供模態窗口功能，同時也都集成到了bootstrap.min.js中

Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分：

　　彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕

　　彈出框主體，一般使用“modal-body”表示，彈出框的主要內容

　　彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕

例如：

<button class="btn btn-primary btn-mymodal" data-toggle="modal" data-target="#mymodal-data" type="button">通過data-target觸發</button>
<!-- 模態彈出窗內容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <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><span class="sr-only">Close</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" data-dismiss="modal">關閉</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div>
 </div>
</div>

 

另外還有一種通過jQuery調用方式：

去掉上面的data-toggle="modal"和data-target="..."的屬性，然后直接通過jquery方式來調用觸發

<script type="text/javascript">
    $(function(){
        $(".btn-mymodal").click({
           $("#mymodal-data").modal();
        }); 
    })
</script>

注：還可通過參數設置來改變效果

keyboard;backdrop;show;

remote:此參數代表通過此來設置從其他地方加載的內容的地址，然后到modal中顯示

例如：

<script type="text/javascript">
    $(function(){
        $(".btn-mymodal").click({
           $("#mymodal-data").modal({

　　　   　　keyboard:false,

　　　　　　remote:http://www.baidu.com

　　　　});
        }); 
    })
</script>

 

 

模態彈出窗還支持四種類型的事件，分別是模態彈出窗的彈出前、彈出后，關閉前、關閉后，具體描述如下：

事件類型	描述
show.bs.modal	在show方法調用時立即觸發（尚未顯示之前）；如果單擊了一個元素，那么該元素將作為事件的relatedTarget屬性
shown.bs.modal	該事件在模態彈出窗完全顯示給用戶之后（並且等CSS動畫完成之后）觸發；如果單擊了一個元素，那么該元素將作為事件的relatedTarget事件
hide.bs.modal	在hide方法調用時（但還未關閉隱藏）立即觸發
hidden.bs.modal	該事件在模態彈出窗完全隱藏之后（並且CSS動畫漂完成之后）觸發

調用方法也非常簡單：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 處理代碼...
})