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 –
Спасибо. Это работает - любой способ заставить его исчезать так же, как apon щелкает близко? – Csarg