快捷導(dǎo)航

bootstrap modal彈出框的垂直居中

更新時(shí)間：2016年12月14日 10:13:37 作者：咕咕雞5

這篇文章主要為大家詳細(xì)介紹了bootstrap modal彈出框的垂直居中，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本人前端菜鳥(niǎo)，公司項(xiàng)目嘗試采用bootstrap，我身先士卒為同事趟“坑”，無(wú)奈UI妹子刁難非得讓modal彈出框垂直居中，為了前端開(kāi)發(fā)崗位的榮譽(yù)，花時(shí)間滿足之。

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

 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，無(wú)非就是計(jì)算里邊modal-dialog的left值和height值來(lái)讓它居中咯，問(wèn)題來(lái)了，你把這段代碼加入bootstrap.js的源碼（大概1000行左右的樣子），可以console到that.element.children().eq(0).width()一直為0，也就是它還沒(méi)創(chuàng)建，獲取不到值，菜鳥(niǎo)拙見(jiàn)，加了個(gè)setTimeout 150ms的延遲，倒是獲取到了，妥妥的居中，又蹦出兩個(gè)問(wèn)題，一個(gè)是用戶主動(dòng)拖動(dòng)窗口大小的時(shí)候，它不會(huì)跟著自適應(yīng)，解決方法也很簡(jiǎn)單寫(xiě)個(gè)resize方法；第二個(gè)問(wèn)題是當(dāng)窗口小于時(shí)600時(shí)that.element.children().eq(0).width()的值時(shí)而對(duì)，時(shí)而不對(duì)（求大神路過(guò)幫忙解答），故棄之

想直接解決問(wèn)題看上邊直接忽略

垂直居中考慮到display：table-cell，也受網(wǎng)上的啟發(fā)，解決方法如下。
重寫(xiě)樣式并style標(biāo)簽或外聯(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%'})

改起來(lái)很簡(jiǎn)單，也很暴力，后果就是在任意處點(diǎn)擊讓modal消失的事件失效了，我搜的資料如是說(shuō)我搜的資料，但我沒(méi)看懂咋整

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: