JavaScript：bootstrap 模态框的简单应用

Posted 2020-08-19 一碗豆浆

最近用上了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