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

 到此大功告成！，但願對幫助到你們。

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

---

共勉：　　

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

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

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