Henry Henry - 4 months ago 15
CSS Question

How to create a specific modal box

I got this little problem when trying to create the modal box animation. I have managed to make the background fade to black and the modal box slides in, but when i clicked the close button only the modal box will slide up and not the background returning to normal and let me click on anything else on the page
Please help, thanks in advance.

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


here is the javascript part

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");
};
}


and the html

<div onclick="openModal()">click me</div>
<div class="modal">
<div class="modal-content">
<img onclick="closeModal()" src="X.png">
</div>
</div>


somehow i managed to close both but simultaneously though :(

Answer

UPDATED

$(".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;
}
<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>