JavaScript：bootstrap 模态框的简单应用

最近用上了bootstrap这个强大的前端框架，有空来总结一下。这里记录下模态框的简单应用。

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

 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>  //这里如果只用到bootstrap的模态框的话，可以换成model.js
 <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里。

 <!-- 点击触发模态框 -->
     <button id="demo_button" type="button" class="btn btn-default" data-toggle="modal" data-target="#demoModal" style="width:80px;height:36px;">点击我</button>
     <!-- 模态框（Modal）-->
     <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true" data-backdrop="static">
         <div class="modal-dialog" style="width: 800px;">
             <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="demoModalLabel">这是标题</h4>
                 </div>
                 <div class="modal-body" style="height: 320px;">
                     <form action="" method="post" id="userForm">

                     </form>
                 </div><!-- /.modal-body -->
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                     <button type="button" class="btn btn-primary" onclick="saveOrUpdateUser()">提交更改</button>
                 </div>
             </div><!-- /.modal-content -->
         </div><!-- /.modal -->
     </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模态框就写好了，但是现在的模态框只是水平居中，而且是不能拖拽的，所以还要进行一些处理。

 //设置模态框可移动 这里用到上面引入的jquery-ui-custom.min.js
 $(#id).draggable({
     handle: ".modal-header",
     cursor: 'move',
     refreshPositions: false
 });

 //模态框居中显示
 function centerModals() {
     $(#id).each(function(i){
         var $clone = $(this).clone().css('display', 'block').appendTo('body');
         //设置modal垂直居中
         var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
         top = top > 0 ? top : 0;
         $(this).find('.modal-content').css("margin-top", top);
         $clone.remove();

     });
 }

 $(window).on('resize', centerModals);  

还要修改bootstrap.css中的一个样式

 .modal-backdrop {
   position: absolute;
   top:;
   right:;
   left:;
   background-color: #000;
 }

改为：

 .modal-backdrop {
   position: fixed;
   top:;
   right:;
   left:;
   bottom:;
   background-color: #000;
 }

---

这里是一些可与 modal() 一起使用的有用的方法。

这里是一些可用的事件

由于我需要用到很多不同的模态框，打开和关闭的时候都需要执行一些动作，所以稍微做了下封装。。。

 /**
  * 初始化模态窗口
  * @param modalName 模态窗口id
  * @param showBcak show时执行的方法
  * @param hideBcak hide时执行的方法
  */
 function modalInit(modalName,showBcak,hideBcak)
 {
     var modalName = '#' + modalName;
     //设置模态框可移动
     $(modalName).draggable({
         handle: ".modal-header",
         cursor: 'move',
         refreshPositions: false
     });

     //模态框居中显示
     function centerModals() {
         $(modalName).each(function(i){
             var $clone = $(this).clone().css('display', 'block').appendTo('body');
             //设置modal垂直居中
             var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
             top = top > 0 ? top : 0;
             $(this).find('.modal-content').css("margin-top", top);
             $clone.remove();

         });
     }
     //调用show方法时触发
     $(modalName).on('show.bs.modal', function(){
         if (null != showBcak && "" != showBcak) {
             var funcBack = eval(showBcak);
             new funcBack();
         }
         centerModals();
     });
     //调用hide方法时触发
     $(modalName).on('hide.bs.modal', function(){
         if (null != hideBcak && "" != hideBcak)
         {
             var funcBack = eval(hideBcak);
             new funcBack();
         }

     });
     $(window).on('resize', centerModals);
 }

调用

 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