模態框居中顯示

模態框居中顯示，在網上看到別人的方法，很簡單就粘過來了

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模態框水平垂直居中的代碼

/* 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);

/*設置模態框居中顯示  密碼修改模態框居中顯示*/
function centerModals() {
    $('#operDialogPassword').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);
    });
}
$('#operDialogPassword').on('show.bs.modal', centerModals);

其中，$(window).on('resize', centerModals); 代表用戶改變瀏覽器時的事件，可以不用，但是改變瀏覽器，模態框不會跟着變化。

以上的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">

模態框內容

</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> </div> </div> </div> </div>