如何創建特定的模態框

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

修訂

$(".openModal").click(function(){ 
 
\t $(".modal").fadeIn("slow", function(){ 
 
    \t $(this).find(".modal-content").fadeIn("slow"); 
 
    }); 
 
}); 
 
$(".closeModal").click(function(){ 
 
\t $(".modal-content").fadeOut("slow", function(){ 
 
    \t $(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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="openModal">click me</div> 
 
    <div class="modal"> 
 
     <div class="modal-content"> 
 
      <img class="closeModal" src="http://findicons.com/files/icons/1008/quiet/128/no.png"> 
 
     </div> 
 
    </div>