Bootstrap Modal（模態框）組件水平垂直居中
阿新 • • 發佈：2017-10-25
https com hellip img dom 處理 adding 水平 時有
此項目中的bootstrap版本是3.3.7 。 在某些項目進行過程中遇到組件模態框無法垂直居中，示例demo代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>bootstrap modal 垂直居中測試</title> 5 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 6 <meta charset="utf-8"> 7 </head> 8 <body> 9 10 <button type="button" id="modalBtn" class="btn btn-primary">點擊彈出modal</button> 11 12 <div class="modal fade" id="myModal"> 13 <div class="modal-dialog"> 14 <div class="modal-content"> 15 <div class="modal-header"> 16 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span 17 aria-hidden="true">×</span></button> 18 <h4 class="modal-title">Modal 標題</h4> 19 </div> 20 <div class="modal-body"> 21 <p>內容…</p> 22 </div> 23 <div class="modal-footer"> 24 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> 25 <button type="button" class="btn btn-primary">確定</button> 26 </div> 27 </div><!-- /.modal-content --> 28 </div><!-- /.modal-dialog --> 29 </div><!-- /.modal --> 30 31 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 32 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 33 34 <script type="text/javascript"> 35 $(function(){ 36 // dom加載完畢 37 var $m_btn = $(‘#modalBtn‘); 38 var $modal = $(‘#myModal‘); 39 $m_btn.on(‘click‘, function(){ 40 $modal.modal({backdrop: ‘static‘}); 41 }); 42 }); 43 </script> 45 </body> 46 </html>
效果如下：
2、說明：使用modal 彈出事件方法：
Bootstrap 的模態框類提供了一些事件用於監聽並執行你自己的代碼。
| 事件類型 | 描述 |
|---|---|
| show.bs.modal | show 方法調用之後立即觸發該事件。如果是通過點擊某個作為觸發器的元素，則此元素可以通過事件的 relatedTarget 屬性進行訪問。 |
| shown.bs.modal | 此事件在模態框已經顯示出來（並且同時在 CSS 過渡效果完成）之後被觸發。如果是通過點擊某個作為觸發器的元素，則此元素可以通過事件的 relatedTarget 屬性進行訪問。 |
| hide.bs.modal | hide 方法調用之後立即觸發該事件。 |
| hidden.bs.modal | 此事件在模態框被隱藏（並且同時在 CSS 過渡效果完成）之後被觸發。 |
| loaded.bs.modal | 從遠端的數據源加載完數據之後觸發該事件。 |
$(‘#myModal‘).on(‘hidden.bs.modal‘, function (e) {
// do something...
})
一、處理方式1
1、其中 “shown.bs.modal”可以在彈窗框出現後 做一些處理， 更改彈出框的樣式當然是可以的：
1 <script type="text/javascript"> 2 $(function(){ 3 // dom加載完畢 4 var $m_btn = $(‘#modalBtn‘); 5 var $modal = $(‘#myModal‘); 6 $m_btn.on(‘click‘, function(){ 7 $modal.modal({backdrop: ‘static‘}); 8 }); 9 // 測試 bootstrap 居中 10 $modal.on(‘shown.bs.modal‘, function(){ 11 var $this = $(this); 12 var $modal_dialog = $this.find(‘.modal-dialog‘); 13 var m_top = ( $(window).height() - $modal_dialog.height() )/2; 14 $modal_dialog.css({‘margin‘: m_top + ‘px auto‘}); 15 }); 16 }); 17 </script>
該方式實現模態框居中了， 但是彈出時有一些遲疑後抖動到中部；不是特別理想， 接下來試試第二種方式；
2、方式2
1 <script type="text/javascript"> 2 $(function(){ 3 // dom加載完畢 4 var $m_btn = $(‘#modalBtn‘); 5 var $modal = $(‘#myModal‘); 6 $m_btn.on(‘click‘, function(){ 7 $modal.modal({backdrop: ‘static‘}); 8 }); 9 10 // 測試 bootstrap 居中 11 $modal.on(‘show.bs.modal‘, function(){ 12 var $this = $(this); 13 var $modal_dialog = $this.find(‘.modal-dialog‘); 14 // 關鍵代碼，如沒將modal設置為 block，則$modala_dialog.height() 為零 15 $this.css(‘display‘, ‘block‘); 16 $modal_dialog.css({‘margin-top‘: Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) }); 17 }); 18 19 }); 20 </script>
二、處理方式2（bootstrap源文件更改）
彈出框出現時， 調用的自然是 Modal.prototype.show() 方法， 而show 方法中又調用了 that.adjustDialog() 方法：
以上代碼看來，官方要實現 垂直居中簡直太容易， 而他們沒有。加上少量代碼：
1 Modal.prototype.adjustDialog = function () { 2 var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight 3 4 this.$element.css({ 5 paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : ‘‘, 6 paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ‘‘ 7 }) 8 // 是彈出框居中。。。 9 var $modal_dialog = $(this.$element[0]).find(‘.modal-dialog‘); 10 var m_top = ( $(window).height() - $modal_dialog.height() )/2; 11 $modal_dialog.css({‘margin‘: m_top + ‘px auto‘}); 12 }
最終效果圖如下：
Bootstrap Modal（模態框）組件水平垂直居中