Bootstrap模態框水平垂直居中與增加拖曳功能

最近開發一個CMS系統使用上了Bootstrap，在開發一個添加某些選項時，打算彈出一個模態框，但是發現，模態框不會垂直居中到屏幕上，而是在屏幕上方，找了很多資料都沒搞定，最後自己試出了一種JS的方法，同時還需要Bootstrap模態框可以拖動，但是發現預設的也不行，翻遍了網路找了出來。現在分享給大家：

以下為Bootstrap模態框拖曳功能的增加方法

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

   

handle: ".modal-header", 去除將可以整個模態框都可以拖曳，其中modal- header代表拖曳的DIV的CLASS或ID

以下為彈出Bootstrap模態框水平垂直居中的代碼

/* center modal */
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', centerdals);瀏覽器時的事件，可以不用，但是改變瀏覽器，模態框不會跟著改變。

以上的JS程式碼加到頁面的最後即可

Bootstrap模態框HTML

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">标题</h4>
</div>
<div style="padding:5px;">
<div class="modal-body" data-scrollbar="true" data-height="200" data-scrollcolor="#000">

   

框水平垂直居中與增加拖曳功能,實現一個模擬後台資料登錄的效果，希望對大家有所幫助