bootstrap彈出的模態框水平垂直居中的實現

學習javascript從入門到放棄！，這是第一篇隨筆，經驗不足，如有不當之處，還望指出。好了廢話不多說直接切入正題吧

?

1.bootstrap默認的model寫法：

//觸發模態框的button
<button data-toggle="modal" data-target="#myModal"type="button"
class="btn btn-default" >button
</button>
//彈出的模態框內容
<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header">                                                                                                                                   //關閉模態框<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><img src="/static/img/modal-close.png"/></span></button><h4 class="modal-title f24" id="mySmallModalLabel">支付</h4></div><div class="modal-body"></div></div></div>
</div>

?//通過javascript調用，只需一行 JavaScript 代碼，即可通過元素的 id?myModal?調用模態框：

$('#myModal').modal();

2.實現水平垂直居中

使用modal彈出事件方法。bootsrtap的模態框提供了一些事件用于監聽并執行自己的代碼。我們先看一下bootstrap提供的了哪些事件及基本用法；

從上面的圖片中可以了解到bootstrap提供的這些事件應用的條件。我們的需求是:在觸發modal顯示的時候，modal出現在頁面的水平垂直居中位置，那么show.bs.modal恰恰符合我們的需求。so，我們可以這樣寫

$('#myModal').on('show.bs.modal'，function(e){//設置模態框的水平垂直方向的位置；
});

里面的function(e){};可以拿出在單獨定義一個function,這里命名為centerModals，

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);   });   
};    

最后在show.bs.modal事件中調用centerModals函數：

$('#myModal').on('show.bs.modal', centerModals);
//禁用空白處點擊關閉
$('#myModal').modal({
backdrop: 'static',
keyboard: false,//禁止鍵盤
show:false
});
//頁面大小變化是仍然保證模態框水平垂直居中
$(window).on('resize', centerModals);

?到此大功告成！，希望對幫助到大家。

如有不當之處，還望賜教。

---

共勉：　　

　　人生的路上沒有地圖，我們一路走一路在尋找，我們每個人心中都有夢想，但沒有人知道抵達目的地的正確線路，所以我們在黑夜中摸索前行。

　　人生的路上沒有地圖，我們一路走一路被辜負，每一條尋夢的路上都充滿荊棘和陷阱，每一個奮斗的人生都充滿了挫折和辜負。但即使被打倒，也要站起來，撣撣身上的土，繼續前行；即使被辜負，也要笑一笑，把它拋之腦后，接著上路。

　　因為人生沒有地圖，只要你勇敢走下去，就永遠不會迷路！