我试图创建模态框动画时遇到了这个小问题。我已经设法使背景变黑,模态框滑入,但是当我点击关闭按钮时,只有模式框会滑动,而不是背景恢复正常,让我点击页面上的其他任何东西 请帮助,提前致谢。如何创建特定的模态框
.modal{
display:none;
z-index:99;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background-color: rgba(0,0,0,0.7);
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
.modal-content{
position:relative;
width:90%;
height:90%;
margin: 2% auto;
background-color: #dfdde0;
display:none;
animation-fill-mode: forwards;
animation-name:slide-down-modal;
animation-duration: 0.6s;
}
.modal-content img{
float:right;
height:24px;
width:24px;
margin-top:10px;
margin-right:10px;
opacity:0.5;
}
.modal-content img:hover{
opacity:1;
}
@keyframes slide-down-modal{
from{top:-700px}
to{top:0}
}
@keyframes slide-up-modal{
from{top:0; opacity:1}
to{top:-700px; opacity:0}
}
这里是JavaScript部分
function openModal(){
var modal=document.getElementsByClassName("modal")[0];
var modalContent=document.getElementsByClassName("modal-content")[0];
modal.style.display="block";
modalContent.style.display="block";
}
function closeModal(){
var modal=document.getElementsByClassName("modal")[0];
var modalContent=document.getElementsByClassName("modal-content")[0];
modalContent.style.animationName="slide-up-modal";
if($(".modal").css("display")=="block"){
$(".modal").css("display", "none");
};
}
和HTML
<div onclick="openModal()">click me</div>
<div class="modal">
<div class="modal-content">
<img onclick="closeModal()" src="X.png">
</div>
</div>
不知何故,我设法关闭这两个,但同时,虽然:(
分享你的代码 – Dave
请与我们分享您的代码,您正在尝试。 –