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

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

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

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

　　Bootstrap官網(wǎng)下載：

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

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

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

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

　　參考地址：　　

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

　　自己也試了改了幾種方式也不容樂(lè)觀，發(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 });

　　頁(yè)面代碼如下：

1

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