本文關(guān)鍵詞：模態(tài)，由筆耕文化傳播整理發(fā)布。

Bootstrap模態(tài)框(modal)垂直居中

　　有段日子沒有寫文章可，或許因?yàn)楣ぷ髅Φ脑�，或者沒有什么可寫的內(nèi)容等等，其實(shí)這些無非都是為自己找的一種借口。正如經(jīng)常說的一句話：海綿里面的水?dāng)D擠還是有的，時間擠擠也會有的。這說明的問題只能是自己懶惰的原因，如果每天都在學(xué)習(xí)，或者水深火熱沉浸在項(xiàng)目中，讓你可寫的內(nèi)容還是挺多了，可以記錄自己的學(xué)習(xí)過程，可以記錄項(xiàng)目開發(fā)過程中自己負(fù)責(zé)的內(nèi)容，……

　　自己目前參與的項(xiàng)目中用到的技術(shù)還是挺多了，比如：Bootstrap框架、Konckout.js、上傳插件uploadify、繪圖插件jqplot等等，，這樣一看真的還不少。

　　Bootstrap官網(wǎng)下載：

　　今天就在使用Bootstrap框架中遇到的一個問題分享一下，在產(chǎn)品開發(fā)的過程中使用了大量的彈出窗口（modal）。

　　剛開始學(xué)習(xí)使用的過程中就發(fā)現(xiàn)此窗口不能垂直居中，總是偏上，并且不能拖動，看了一下使用說明也沒有提供過多的屬性設(shè)置和方法，就這樣使用默認(rèn)的方式一直用著。最近，客戶卻提出了一個要求：能不能讓彈出窗口居中，因?yàn)橐恍┬〉拇翱谄峡偢杏X整體頁面失衡，大一點(diǎn)的還過得去。

　　因?yàn)橹皩ootstrap也不是很熟悉，便開始baidu、google，發(fā)現(xiàn)只有很少的解決方案，如下：

).modal().css({ : function () { 3 return - ($(this).height() / 2); 4 } 5 });

　　參考地址：　　

　　這種方法自己試了一下，并不能完全居中，并且窗口的大小不一樣的話，每次顯示的margin-top值也會改變，遮蓋層還會出現(xiàn)滾動條，效果也不好看。

　　自己也試了改了幾種方式也不容樂觀，發(fā)現(xiàn)在窗口彈出之前是獲取不到$(this).height()的值，本想著是用($(window).height()-$(this).height())/2，發(fā)現(xiàn)還是不可行。

　　最終只能研究一下源碼了，發(fā)現(xiàn)可以在bootstrap.js文件900行后面添加如下代碼，便可以實(shí)現(xiàn)垂直居中。

, ).css({ :, : function () { ; 5 }, : function () { ; 8 } 9 });

　　頁面代碼如下：

1

  本文關(guān)鍵詞：模態(tài)，由筆耕文化傳播整理發(fā)布。