bootstrapmodal彈出框的垂直居中

最先就是百度咯，方法，就是修改源碼

that.$element.children().eq(0).css("position", "absolute").css({
 "margin":"0px",
 "top": function () {
 return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";
 },
 "left": function () {
 return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";
 }
 });

這里的that.element就是最外層的div.modal ，that.element.children().eq(0)就是div.modal-dialog，無非就是計算里邊modal-dialog的left值和height值來讓它居中咯，問題來了，你把這段代碼加入bootstrap.js的源碼（大概1000行左右的樣子），可以console到that.element.children().eq(0).width()一直為0，也就是它還沒創(chuàng)建，獲取不到值，菜鳥拙見，加了個setTimeout 150ms的延遲，倒是獲取到了，妥妥的居中，又蹦出兩個問題，一個是用戶主動拖動窗口大小的時候，它不會跟著自適應，解決方法也很簡單寫個resize方法；第二個問題是當窗口小于時600時that.element.children().eq(0).width()的值時而對，時而不對（求大神路過幫忙解答），故棄之

想直接解決問題看上邊直接忽略

垂直居中考慮到display：table-cell，也受網(wǎng)上的啟發(fā)，解決方法如下。
重寫樣式并style標簽或外聯(lián)引入html內(nèi)

.modal-dialog{display:table-cell;vertical-align:middle;}
.modal-content{width:600px;margin:0px auto;}
@media screen and (max-width: 780px) {
.modal-content{width:400px;}
}
@media screen and (max-width: 550px) {
.modal-content{width:220px;}
}

將modal觸發(fā)事件$(‘.modal').modal()改為如下

$('.modal').modal().css({'display':'table','width':'100%','height':'100%'})

改起來很簡單，也很暴力，后果就是在任意處點擊讓modal消失的事件失效了，我搜的資料如是說我搜的資料，但我沒看懂咋整

雖然點擊叉子和close按鈕都可以實現(xiàn)關閉，但是不能讓后臺同事看不起啊，自己想了想在js里插入兩行醬紫的代碼

$(觸發(fā)器).click(function(){ 
 $('.modal').modal().css({'display':'table','width':'100%','height':'100%'})//這句觸發(fā)modal
 $('.modal-backdrop').fadeIn()
 event.stopPropagation();//因為觸發(fā)的元素肯定在document里邊，所以必須阻止冒泡
})
$(document).click(function(){
 $('.modal').hide()
 $('.modal-backdrop').fadeOut()
})

到此，能實現(xiàn)modal的垂直居中，但問題還是有的，modal-backdrop的fadein時間和fadeout時間忽閃忽閃的過于夸張跟原來的還是有點異樣，求過路大神，提點。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com