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

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

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

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

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

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

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

 
function centerModals() { 
$('#myModal').each(function(i) { 
var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2); 
top = top > 0 ? top : 0; 
$clone.remove(); 
$(this).find('.modal-content').css("margin-top", top); 
}); 
} 
$('#myModal').on('show.bs.modal', centerModals); 
$(window).on('resize', centerModals); 

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

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

Bootstrap模态框HTML

 
 
 
 
 
× 
标题 
 
 
 

模态框内容

 
 
 
关闭 
 
 
 
 

以上所述是小编给大家介绍的Bootstrap模态框水平垂直居中与增加拖拽功能,实现一个模拟后台数据登入的效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！