本人前端菜鳥,公司專案嘗試採用bootstrap,我身先士卒為同事趟“坑”,無奈UI妹子刁難非得讓modal彈出框垂直居中,為了前端開發崗位的榮譽,花時間滿足之。
最先就是百度咯,方法,就是修改源碼
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,也就是它還沒創建,獲取不到值,菜鳥拙見,加了個setTimeout 150ms的延遲,倒是獲取到了,妥妥的居中,又跳出兩個問題,一個是用戶主動拖曳視窗大小的時候,它不會跟著自適應,解決方法也很簡單寫個resize方法;第二個問題是當視窗小於時600時that. element.children().eq(0).width()的值時而對,時而不對(求大神路過幫忙解答),故棄之
想直接解決問題看上邊直接忽略
垂直居中考慮到display: table-cell,也受網路上的啟發,解決方法如下。
重寫樣式並style標籤或外聯引入html內
.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觸發事件$('.modal').modal()改為如下
$('.modal').modal(). css({'display':'table','width':'100%','height':'100%'})
改起來很簡單,也很暴力,後果就是在任何點擊讓modal消失的事件失效了,我搜的資料如是說我搜的資料,但我沒看懂咋整
雖然點擊叉子和close按鈕都可以實現關閉,但是不能讓後台同事看不起啊,自己想了想在js裡插入兩行醬紫的程式碼
$(触发器).click(function(){ $('.modal').modal().css({'display':'table','width':'100%','height':'100%'})//这句触发modal $('.modal-backdrop').fadeIn() event.stopPropagation();//因为触发的元素肯定在document里边,所以必须阻止冒泡 }) $(document).click(function(){ $('.modal').hide() $('.modal-backdrop').fadeOut() })
到此,能實現modal的垂直居中,但問題還是有的,modal-backdrop的fadein時間和忽fadeout時間誇張閃存的過於忽張閃的還是有點異樣,求過路大神,提點。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。
更多bootstrap modal彈出框的垂直居中相關文章請關注PHP中文網!