开发文章

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

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

以下为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>  

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

文章信息

发布时间:2015-09-22

作者:磐实编程网

发布者:aquwcw

浏览次数: