1
ポップアップを表示するために次のコードを作成しました。後でポップアップエフェクトを追加するアニメーションとうまく動作します。しかし、私はそれを閉じて、それを再開しようとすると、アニメーションは表示されません?モーダルはただちに表示されます。 どうすれば修正できますか?HTMLモーダルポップアップアニメーションが2回動作しない
<div id="overlay">
<div class="popout">
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
.popout {
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
}
@keyframes popout {
from{transform:scale(0)}
80%{transform:scale(1.2)}
to{transform:scale(1)}
}
@-webkit-keyframes popout {
from{-webkit-transform:scale(0)}
80%{-webkit-transform:scale(1.2)}
to{-webkit-transform:scale(1)}
}
</style>
<script>
function overlay() {
\t el = document.getElementById("overlay");
\t el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
を見 - このコードもそれを最初にアニメーション化されませんが時間。 – Csarg
間違ったjsfiddleリンクを投稿しました。更新をチェックできますか? https://jsfiddle.net/xapdhxv3/1/それは私のためにFirefoxで動作します –
ありがとうございました。これは、同じ方法でそれをフェードアウトさせるどのような方法でも動作します。 – Csarg