JavaScript：bootstrap 模態框的簡單應用

最近用上了bootstrap這個強大的前端框架，有空來總結一下。這裏記錄下模態框的簡單應用。

首先，要在頁面中引入相應的js、css文件

1 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
2 <script type="text/javascript" src="js/jquery.min.js"></script>
3 <script type="text/javascript" src="js/bootstrap.min.js"></script>  //這裏若是隻用到bootstrap的模態框的話，能夠換成model.js
4 <script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>  //這個js裏主要是須要用到jquery.ui.draggable.js,可是這個js須要依賴其餘的js,因此我直接上jquery-ui的官網上根據本身的須要生成

而後在html裏寫一個模態框的實例，內容寫在class="modal-body"這個div裏。

 1 <!-- 點擊觸發模態框 -->
 2     <button id="demo_button" type="button" class="btn btn-default" data-toggle="modal" data-target="#demoModal" style="width:80px;height:36px;">點擊我</button>
 3     <!-- 模態框（Modal）-->
 4     <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true" data-backdrop="static">
 5         <div class="modal-dialog" style="width: 800px;">
 6             <div class="modal-content">
 7                 <div class="modal-header">
 8                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 9                     <h4 class="modal-title" id="demoModalLabel">這是標題</h4>
10                 </div>
11                 <div class="modal-body" style="height: 320px;">
12                     <form action="" method="post" id="userForm">
13                         
14                     </form>
15                 </div><!-- /.modal-body -->
16                 <div class="modal-footer">
17                     <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
18                     <button type="button" class="btn btn-primary" onclick="saveOrUpdateUser()">提交更改</button>
19                 </div>
20             </div><!-- /.modal-content -->
21         </div><!-- /.modal -->
22     </div>

觸發modal有2種方式，一種就是上面給div添加2個屬性  data-toggle="modal" data-target="#demoModal" 或者 href="#demoModel" 其中#demoModel是要彈出的模態框的id。另外一種方式是用js控制：$('#demoModal').modal('show');

說一下一些比較重要的屬性：

  id：模態框的id。
  aria-labelledby：該屬性引用模態框的標題
  aria-hidden：true 用於保持模態窗口不可見，直到觸發器被觸發爲止，好比上面的button
  data-backdrop：static 表示點擊遮罩層不關閉模態窗口

---

這樣子，一個基本的bootstrap模態框就寫好了，可是如今的模態框只是水平居中，並且是不能拖拽的，因此還要進行一些處理。

 1 //設置模態框可移動 這裏用到上面引入的jquery-ui-custom.min.js
 2 $(#id).draggable({   
 3     handle: ".modal-header",   
 4     cursor: 'move',   
 5     refreshPositions: false
 6 });
 7             
 8             
 9 //模態框居中顯示
10 function centerModals() {   
11     $(#id).each(function(i){  
12         var $clone = $(this).clone().css('display', 'block').appendTo('body');
13         //設置modal垂直居中
14         var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
15         top = top > 0 ? top : 0;   
16         $(this).find('.modal-content').css("margin-top", top);
17         $clone.remove();
18        
19     });
20 }
21 
22 $(window).on('resize', centerModals);  

還要修改bootstrap.css中的一個樣式

1 .modal-backdrop {
2   position: absolute;
3   top: 0;
4   right: 0;
5   left: 0;
6   background-color: #000;
7 }

改成：

1 .modal-backdrop {
2   position: fixed;
3   top: 0;
4   right: 0;
5   left: 0;
6   bottom: 0;
7   background-color: #000;
8 }

---

 

這裏是一些可與 modal() 一塊兒使用的有用的方法。

這裏是一些可用的事件

因爲我須要用到不少不一樣的模態框，打開和關閉的時候都須要執行一些動做，因此稍微作了下封裝。。。

 1 /**
 2  * 初始化模態窗口
 3  * @param modalName 模態窗口id
 4  * @param showBcak show時執行的方法
 5  * @param hideBcak hide時執行的方法
 6  */
 7 function modalInit(modalName,showBcak,hideBcak)
 8 {
 9     var modalName = '#' + modalName;
10     //設置模態框可移動
11     $(modalName).draggable({   
12         handle: ".modal-header",   
13         cursor: 'move',   
14         refreshPositions: false
15     });
16     
17     
18     //模態框居中顯示
19     function centerModals() {   
20         $(modalName).each(function(i){  
21             var $clone = $(this).clone().css('display', 'block').appendTo('body');
22             //設置modal垂直居中
23             var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
24             top = top > 0 ? top : 0;   
25             $(this).find('.modal-content').css("margin-top", top);
26             $clone.remove();
27            
28         });
29     }
30     //調用show方法時觸發
31     $(modalName).on('show.bs.modal', function(){
32         if (null != showBcak && "" != showBcak) {
33             var funcBack = eval(showBcak);
34             new funcBack();
35         }
36         centerModals();
37     });
38     //調用hide方法時觸發
39     $(modalName).on('hide.bs.modal', function(){
40         if (null != hideBcak && "" != hideBcak)
41         {
42             var funcBack = eval(hideBcak);
43             new funcBack();
44         }
45         
46     });
47     $(window).on('resize', centerModals);  
48 }

調用

1 modalInit("demoModal", null,null);

---

附件：

　　http://files.cnblogs.com/files/zzd-zxj/model.rar

參考資料：

　　Bootstrap模態框水平垂直居中與增長拖拽功能http://www.panshy.com/articles/201509/webdev-2524.html　　Bootstrap 模態框（Modal）插件http://www.dnzs.com.cn/w3cschool/bootstrap/bootstrap-modal-plugin.html