當我單擊關閉按鈕時，我有以下代碼來關閉模式視窗。我希望它隨著影片的上升而關閉。現在模態視窗上升，然后它又回來了。
但它不起作用。有人可以幫我為什么會這樣嗎？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.modal-window{
position: fixed;
left:0;
right:0;
top:0;
display: none;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
z-index: 1;
}
.card{
margin: 100px auto;
position: relative;
z-index: 1;
width: 500px;
height: 300px;
text-align: center;
padding-top: 100px;
background-color: #fefefe;
animation: open .4s;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.show{
display: block;
}
.close-with-anim{
animation:close .4s;
}
@keyframes close {
from{
top:0;
opacity: 1;
}
to{
top:-300px;
opacity: 0;
display: none;
}
}
@keyframes open {
from{
top:-300px;
opacity: 0;
}
to{
top:0;
opacity: 1;
}
}
.close{
cursor: pointer;
}
</style>
</head>
<body>
<button id="modal">Modal window</button>
<div class="modal-window">
<div class="card">
<span class="close">×</span>
<div class="modal-content">
Sign up page
</div>
<div class="moda-form">
<input type="text" name="" id="">
</div>
</div>
</div>
<script>
const modal=document.querySelector('#modal');
const modalWindow=document.querySelector('.modal-window');
const close=document.querySelector('.close');
modal.addEventListener('click',()=>{
modalWindow.classList.toggle('show');
})
close.addEventListener('click',()=>{
modalWindow.classList.add('close-with-anim');
})
</script>
</body>
</html>這是代碼沙盒的鏈接： https ://codesandbox.io/s/agitated-davinci-1dqujt ?file=/index.html
uj5u.com熱心網友回復：
animation: close 0.4s forwards;以防止影片重置為其初始幀。
z-index: -1;在close關鍵幀內不阻止您的“模態視窗”按鈕。
您需要洗掉close-with-anim才能再次使用它。
const modal = document.querySelector("#modal");
const modalWindow = document.querySelector(".modal-window");
const close = document.querySelector(".close");
modal.addEventListener("click", () => {
modalWindow.classList.remove("close-with-anim");
modalWindow.classList.toggle("show");
});
close.addEventListener("click", () => {
modalWindow.classList.add("close-with-anim");
}); .modal-window {
position: fixed;
left: 0;
right: 0;
top: 0;
display: none;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.card {
margin: 100px auto;
position: relative;
z-index: 1;
width: 500px;
height: 300px;
text-align: center;
padding-top: 100px;
background-color: #fefefe;
animation: open 0.4s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.show {
display: block;
}
.close-with-anim {
animation: close 0.4s forwards;
}
@keyframes close {
from {
top: 0;
opacity: 1;
}
to {
top: -300px;
opacity: 0;
display: none;
z-index: -1;
}
}
@keyframes open {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
.close {
cursor: pointer;
} <button id="modal">Modal window</button>
<div class="modal-window">
<div class="card">
<span class="close">×</span>
<div class="modal-content">
Sign up page
</div>
<div class="moda-form">
<input type="text" name="" id="" />
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457284.html
標籤：javascript html css
上一篇：日期計算錯誤