私はモーダルボックスを表示して消えるときにそれを作ろうとしています。
私はcss3トランジションを使ってみました。
HTMLCss3/Javascriptの切り替えが機能しません
<div id="modal" class="modal">
<div id="modalcontent" class="modal-content" >
<div class="modal-header">
<span class="close" onclick="closeList()" >x</span>
<h2>Lista File</h2>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<span id="sendlistButt" class="send" onclick="sendList()" >salva</span>
</div>
</div>
CSS
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #444;
width: 650px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
top: -300px;
opacity: 0;
-webkit-transition: top 5s, opacity 5s ; /* Safari */
transition: top 5s, opacity 5s ;
}
.animatetop {
top: 0;
opacity: 1;
}
JS
function close() {
document.getElementById("modal").style.display="none";
document.getElementById("modalcontent").classList.remove("animatetop");
}
function open() {
document.getElementById("modalcontent").classList.add("animatetop");
document.getElementById("modal").style.display="block";
}
このモーダルはなく、移行せずに現れたり消えたりします。 何が間違っていますか?
モーダルのHTML構造は何ですか? – iamalismith
私はhtml構造で編集しました –
関連していますが正確には見つかりません:http://stackoverflow.com/questions/27904886/can-i-apply-a-css-transition-to-the-overflow-property/27905043# 27905043 – TylerH