2012-05-01 30 views
4

這一個完全難倒我。我調整我的CSS所以要經常引導模態只是漸漸在不改變的開始和結束位置滑動是相同的:如何通過blueimp更改Bootstrap Image Gallery的動畫?

.modal.fade.in { 
    top: 50%; 
} 
.modal { 
    top: 50%; 
} 

這導致地方一個漂亮的外觀逐漸。

我想爲Bootstrap Image Gallery創建的圖庫模式實現相同的效果,Bootstrap Image Gallery擴展了引導程序的modal.js。它可以被發現here。雖然它在功能性方面非常吸引人,但是在本週的過程中,我一直使用js和css來無法簡化轉換。對於我的生活,我無法弄清楚如何讓每個圖像都會淡入,但卻不會滑落或橫穿,這真的讓人分心。

我所能做的就是刪除'淡入淡出'類以完全消除過渡。我會認爲,我爲其他模式所做的CSS更改也會應用到畫廊模式,但它們不是。我也瀏覽了bootstrap.js的源代碼,無法弄清楚。我不是一個完整的nube,但遠離js/css專家,需要在這裏工作。謝謝!

回答

1

我會從Chrome開發者工具或Firebug開始,看看爲什麼你的CSS規則被覆蓋。在Chrome瀏覽器的Mac上,按住control並點擊鼠標/滾動框,當你想要檢查的元素的頂部(這將打開一個對話框,你將點擊「檢查元素」)。這將打開開發人員工具,它將以藍色突出顯示您單擊的元素,在這種情況下爲.modal-gallery

我只是檢查這個模式畫廊的源代碼,並在CSS,這 這個代碼bootstrap.min.css注意到:682:

.modal.fade.in { 
    top: 50%; 
} 

可經以下調整屏幕覆蓋代碼在bootstrap.responsive.css:10:

modal.fade.in { 
    top: auto; 
} 

另一項建議是檢查引導圖像-gallery.css文件由於薄有施加到其上的.modal-gallery類,它是不存在於Twitter的引導本身。