Question

我在尝试创建模态框动画时遇到了这个小问题。我设法让背景渐变为黑色并且模态框滑入，但是当我点击关闭按钮时，只有模态框会向上滑动，而不是背景恢复正常，让我点击页面上的任何其他内容请提前帮助，谢谢。

.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>

不知怎的，我设法关闭了两个但同时关闭:(

Answer 1

已更新

$x("xpath")

$(".openModal").click(function(){
	$(".modal").fadeIn("slow", function(){
  	$(this).find(".modal-content").fadeIn("slow");
  });
});
$(".closeModal").click(function(){
	$(".modal-content").fadeOut("slow", function(){
  	$(this).parent(".modal").fadeOut("slow");
  });
});

.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;
display:none;
background-color: #dfdde0;
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;
}

如何创建特定的模态框

1 个答案: