Bootstrap模态框水平垂直居中与增加拖拽功能

最近开发一个CMS系统使用上了Bootstrap，在开发一个添加某些选项时，打算弹出一个模态框，但是发现，模态框不会垂直居中到屏幕上，而是在屏幕上方，找了好多资料都没搞定，最终自己试出了一种JS的方法，同时还需要Bootstrap模态框可以拖动，但是发现默认的也不行，翻遍了网络找了出来。现在分享给大家：

原文地址：http://www.panshy.com/articles/201509/webdev-2524.html

以下为Bootstrap模态框拖拽功能的增加方法

复制内容到剪贴板

1. $("#myModal").draggable({   
2.     handle: ".modal-header",   
3.     cursor: 'move',   
4.     refreshPositions: false  
5. });  

 handle: ".modal-header",   去除将可以整个模态框都可以拖动，其中modal-header代表拖动的DIV的CLASS或ID

以下为弹出Bootstrap模态框水平垂直居中的代码

复制内容到剪贴板

1. /* center modal */  
2. function centerModals() {   
3.     $('#myModal').each(function(i) {   
4.         var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
5.         top = top > 0 ? top : 0;   
6.         $clone.remove();   
7.         $(this).find('.modal-content').css("margin-top", top);   
8.     });   
9. }   
10. $('#myModal').on('show.bs.modal', centerModals);   
11. $(window).on('resize', centerModals);  

其中，$(window).on('resize', centerModals); 代表用户改变浏览器时的事件，可以不用，但是改变浏览器，模态框不会跟着变化。

以上的JS代码加到页面的最后即可

Bootstrap模态框HTML

复制内容到剪贴板

1. <!-- Modal -->  
2. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
3.   <div class="modal-dialog">  
4.     <div class="modal-content">  
5.       <div class="modal-header">  
6.         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
7.         <h4 class="modal-title" id="myModalLabel">标题</h4>  
8.       </div>  
9.       <div style="padding:5px;">  
10.       <div class="modal-body" data-scrollbar="true" data-height="200" data-scrollcolor="#000">  
11.   模态框内容
12. </div>  
13.       </div>  
14.       <div class="modal-footer">  
15.         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
16.       </div>  
17.     </div>  
18.   </div>  
19. </div>