1
我创建了下面的代码来显示一个弹出窗口,它可以正常工作,之后我添加的动画具有弹出效果。但是,如果我关闭并尝试重新打开它,动画不显示?模态立即出现。 我该如何解决它?HTML模式弹出式动画不能正常工作
<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>
我应该做了,我用firefox记 - 此代码甚至不设置动画第一时间。 – Csarg
我发布了一个错误的jsfiddle链接,你能检查更新吗? https://jsfiddle.net/xapdhxv3/1/在Firefox中为我工作 –
谢谢。这个工作 - 以任何方式使它淡出以同样的方式点击关闭? – Csarg