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

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

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

---

共勉：　　

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

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

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