天天看點

Bootstrap模态框(modal)垂直居中

  有段日子沒有寫文章可,或許因為工作忙的原因,或者沒有什麼可寫的内容等等,其實這些無非都是為自己找的一種借口。正如經常說的一句話:海綿裡面的水擠擠還是有的,時間擠擠也會有的。這說明的問題隻能是自己懶惰的原因,如果每天都在學習,或者水深火熱沉浸在項目中,讓你可寫的内容還是挺多了,可以記錄自己的學習過程,可以記錄項目開發過程中自己負責的内容,……

  自己目前參與的項目中用到的技術還是挺多了,比如:Bootstrap架構、Konckout.js、上傳插件uploadify、繪圖插件jqplot等等,這樣一看真的還不少。

  Bootstrap官網下載下傳:

  今天就在使用Bootstrap架構中遇到的一個問題分享一下,在産品開發的過程中使用了大量的彈出視窗(modal)。

  剛開始學習使用的過程中就發現此視窗不能垂直居中,總是偏上,并且不能拖動,看了一下使用說明也沒有提供過多的屬性設定和方法,就這樣使用預設的方式一直用着。最近,客戶卻提出了一個要求:能不能讓彈出視窗居中,因為一些小的視窗偏上總感覺整體頁面失衡,大一點的還過得去。

  因為之前對Bootstrap也不是很熟悉,便開始baidu、google,發現隻有很少的解決方案,如下:

  參考位址:

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

  自己也試了改了幾種方式也不容樂觀,發現在視窗彈出之前是擷取不到$(this).height()的值,本想着是用($(window).height()-$(this).height())/2,發現還是不可行。

  最終隻能研究一下源碼了,發現可以在bootstrap.js檔案900行後面添加如下代碼,便可以實作垂直居中。

  頁面代碼如下:

Bootstrap模态框(modal)垂直居中
Bootstrap模态框(modal)垂直居中

View Code

  效果圖如下:

  如果大家還有其它的方法或者好的建議,歡迎提出交流分享。