bootstrap modal垂直居中（轉）
出處：http://www.cnblogs.com/wteam-xq/p/4328332.html
使用過bootstrap modal（模態框）元件的人都有一種困惑， 好好的一個彈出框怎麼就無法垂直居中了呢？ 當然網上一些前輩也給出了不少答案， 感覺不太全而且針對的都是各自的專案難以給我等小白太直觀的理解。因而手癢試試寫個稍微完整點的解決方案， 作為總結及日後回顧之用。
專案中的bootstrap版本是3.X , 作為專案後臺使用。 在專案進行過程中遇到元件彈出框無法垂直居中，示例demo程式碼如下：
<!DOCTYPE html> <html> <head> <title>bootstrap modal 垂直居中測試</title> <link href="bootstrap.css" rel="stylesheet"> <meta charset="utf-8"> </head> <body> <button type="button" id="modalBtn" class="btn btn-primary">點選彈出modal</button> <div class="modal fade"id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal 標題</h4> </div> <div class="modal-body"> <p>內容…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">確定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script src="jquery-1.10.2.min.js"></script> <script src="bootstrap.js"></script> <script type="text/javascript"> $(function(){ // dom載入完畢 var $m_btn = $('#modalBtn'); var $modal = $('#myModal'); $m_btn.on('click', function(){ $modal.modal({backdrop: 'static'}); }); }); </script> </body> </html>
彈出的效果是這樣的：
當點選按鈕時modal的位置看起來很不舒服， 解決辦法總結有兩：
1.使用modal 彈出事件方法；
從官方文件中可以瞭解到， modal元件有不少事件介面：
其中 “shown.bs.modal”可以在彈窗框出現後 做一些處理， 更改彈出框的樣式當然是可以的：
<script type="text/javascript"> $(function(){ // dom載入完畢 var $m_btn = $('#modalBtn'); var $modal = $('#myModal'); $m_btn.on('click', function(){ $modal.modal({backdrop: 'static'}); }); // 測試 bootstrap 居中-----------主要是這一段程式碼 $modal.on('shown.bs.modal', function(){ var $this = $(this); var $modal_dialog = $this.find('.modal-dialog'); var m_top = ( $(window).height() - $modal_dialog.height() )/2; $modal_dialog.css({'margin': m_top + 'px auto'}); }); }); </script>
該實現方式 彈出框是居中了， 但彈出時有一些遲疑後抖動到中部；不是特別理想， 接下來試試第二種方式；
ps:
該方案我的程式碼實現的不太好， 感謝園友提供的外國連結，實現效果更好一些，程式碼如下：
<script type="text/javascript"> $(function(){ // dom載入完畢 var $m_btn = $('#modalBtn'); var $modal = $('#myModal'); $m_btn.on('click', function(){ $modal.modal({backdrop: 'static'}); }); // 測試 bootstrap 居中 $modal.on('show.bs.modal', function(){ var $this = $(this); var $modal_dialog = $this.find('.modal-dialog'); // 關鍵程式碼，如沒將modal設定為 block，則$modala_dialog.height() 為零 $this.css('display', 'block'); $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) }); }); }); </script>
2.修改bootstrap.js 原始碼；
帶著問題讀js庫原始碼， 往往能學到不少知識；本著怎樣讓 modal元件自動居中目的， 開始跟蹤元件彈窗時對應的事件；
開啟bootstrap.js ctrl+f 找到 modal對應程式碼：
彈出框出現時， 呼叫的自然是 Modal.prototype.show() 方法， 而show 方法中又呼叫了 that.adjustDialog() 方法：
以上程式碼看來，官方要實現 垂直居中簡直太容易， 而他們沒有， 只能說國外同行網站佈局觀跟俺們還是有區別的。加上少量程式碼：
Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})
// 是彈出框居中。。。
var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
var m_top = ( $(window).height() - $modal_dialog.height() )/2;
$modal_dialog.css({'margin': m_top + 'px auto'});
}
然後就實現modal垂直居中了， 效果圖：
總結：
總的來說 兩方案都能實現優雅的垂直居中效果，而實際網站開發中頁面多彈出框自然不止一個；修改原始碼就不用在每個頁面呼叫bootstrap事件，故本人更傾向於方案2。
參考連結：
http://v3.bootcss.com/javascript/#modals
http://www.abeautifulsite.net/vertically-centering-bootstrap-modals/