幻燈片絕對定位莫代爾

我已經創建了一個背景div來承載模態div。幻燈片絕對定位莫代爾

我已經設置了模式格有CSS：

.modal { 
    opacity: 0.01; 
    top: 20px; 
    transition: all ease-in 200ms; 
}

然後，我創建了另一個類添加到它，以顯示它

.modal-open { 
    top: 50px; 
    opacity: 1; 
}

然而，當公開課是添加到div中，chrome顯示正在被刪除的屬性（又稱沒有生效或被覆蓋）。

查看codepen進行演示。您可以點擊背景以再次隱藏模式。

爲什麼它沒有正確過渡？

來源

2017-07-28 Callum Linington

試試這個」 .modal開{ 頂部：50px的; 不透明度：1！重要; }' ?? – zainul

在.modal {}類之後添加.modal-open {} css並且它是工作的..不需要添加！重要 –

因爲你在CSS中放置了.model-open 之前 .modal。

.modal { 
    position: absolute; 
    z-index: 101; 
    transition: all 300ms ease-in-out; 
    top: 20px; 
    opacity: 0.01; 
    width: 500px; 
    background-color: white; 
    left: 50%; 
    margin-left: -250px; 
} 

.modal-open { 
    top: 50px; 
    opacity: 1; 
}

https://codepen.io/anon/pen/KvdZMa

來源

2017-07-28 09:05:55

嚴重..... whyyyyyyyy :( –

雖然沒有出現動畫，但是... –

另外值得一提的是，爲了使它動起來，模態不能成爲背景的孩子！ –

可以使用

.modal.modal-open { 
    top: 50px; 
    opacity: 1; 
}

覆蓋.modal{}

來源

2017-07-28 09:06:02 Dij

您應該添加!important到.modal-open

.modal-open { 
    top: 50px !important; 
    opacity: 1 !important; 
}

或使它像這樣覆蓋.modal

.modal.modal-open { 
    top: 50px !important; 
    opacity: 1 !important; 
}

來源

2017-07-28 09:06:32

幻燈片絕對定位莫代爾

回答

相關問題