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

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

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

---

共勉：　　

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

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

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

轉載于:https://www.cnblogs.com/web-wangmeng/p/5616174.html

總結

以上是生活随笔為你收集整理的bootstrap弹出的模态框水平垂直居中的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。