2012-12-04 53 views
0

有人可以幫助我獲得「響應縮略圖模態框」的工作?響應縮略圖模態框

Code so far: 

http://jsfiddle.net/YCcNY/1/

它應具有:

  • 2行,用5張圖片每個

  • 動態高度:汽車

  • 寬度:的75%屏幕

  • 永遠停留在屏幕上的絕對中心

  • 保持縱橫比調整(響應)

我將不勝感激一個CSS只是做它的方式的時候,但jQuery的也將是精細。

回答

0

對基本結構進行了一些快速更改,以幫助您開始正確的軌道。

Code: 

http://jsfiddle.net/purplenurple/YCcNY/29/

有很多不必要的CSS。一定要小心,不要讓事情變得複雜。 CSS有時候就是這樣,你認爲你需要添加一些東西來解決這個問題,但是你真的需要刪除最初並不明顯的問題。

注意:如果沒有JavaScript,它將不可能垂直居中,因爲模式框和它的容器都沒有固定的高度。您必須通過腳本獲取高度並相應地設置框的位置。

我還沒有實現任何JavaScript你作爲StackOverflow上的目的不是外包你的工作,但幫助你找到你自己:)

希望這有助於你重新回到正軌反正一個解決方案。

+0

非常感謝!這是我所需要的,事實上,它花了幾天的時間讓我回到正軌! 使用Jquery我能夠居中模式框。但仍有一些奇怪的現象: 1.將窗口大小調整爲模態高度時,可以看到它不是完全居中在垂直中間。 2.當我將鼠標懸停在5張圖片上時,框架中斷。我不知道爲什麼,因爲對齊圖像的LI元素不會改變邊距,只有img尺寸發生變化。它不能成爲保證金,因爲懸停或活躍時,LI的利潤率不會改變。 http://jsfiddle.net/YCcNY/33/ –