Closing Animation on Modal Popup

Question

I am working to create a modal popup. I need to add a slide up animation when the popup is closed. There is an animation when the popup opens but noting when the popup closes.

Here is the codepen on which I am working: https://codepen.io/ankitkaulmachama/pen/bGGBMeb

Following is my code:

HTML:

Animated Modal with Header and Footer







  
  
   ×
    
      Some text in the Modal Body
      Some other text...

CSS :

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999999; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 10px;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  padding: 0;
  border: 1px solid #888;
  width: 350px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.9s;
  animation-name: animatetop;
  animation-duration: 0.9s;
  border-radius:5px;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: #cdcdcd;
  float: right;
  font-weight: bold;
  padding-right:5px;
  padding-top:5px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

JAVASCRIPT:

window.onload = function() {

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

// Get the  element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on  (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

function showPopup()
{
        modal.style.display = "block";
}

function hidePopup()
{
        modal.style.display = "none";
}
}

Any help to accomplish this would be grateful.

Yoshie2000 · Accepted Answer

I created two CSS classes, one for each state of the modal, and assigned each of them an animation.
Also, because you can't animate the display property, I created an animation that hides the modal after the closing animation by moving it very far away from the screen.

window.onload = function() {

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

// Get the  element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  showPopup();
}

// When the user clicks on  (x), close the modal
span.onclick = function() {
  hidePopup();
}

function showPopup()
{
		modal.className="modal modal-enabled";
}

function hidePopup()
{
		modal.className="modal modal-disabled";
}

function delay(ms){
  return new Promise((resolve)=>setTimeout(resolve,ms))
}

async function showPopups(){
  for (let i = 0;i<10;i++){
    showPopup();
    await delay(5000);
    hidePopup();
    await delay(5000);
  }
}
  
//showPopups();
}

/* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  z-index: 9999999; /* Sit on top */
  
  /* Location of the box */
  left: 10px;
  top: 10px;
  
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

.modal-disabled {
  -webkit-animation-name: modalClose;
  -webkit-animation-duration: 1s;
  animation-name: modalClose;
  animation-duration: 1s;
  /* If modal disabled (which it is by default), make it invisible using the animation. The animation has a delay so that it fires after the closing animation. You also need to set the position here so it stays there after the animation */
  top: -999999px;
}

/* Animation to completely hide the modal parent after the closing animation.
  display: block doesnt work here because you can't animate it.
*/
@keyframes modalClose {
  0% {
    top: 0;
  }
  99% {
    top: 0;
  }
  100% {
    top: -999999px;
  }
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  padding: 0;
  border: 1px solid #888;
  width: 350px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19);
  border-radius:5px;
}

/* Add Animation */
@keyframes animatetop {
   0% {
    top: -300px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

@keyframes animateclose {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: -300px;
    opacity: 0;
  }
}

/* Modal content if modal disabled: Show closing animation */
.modal-disabled .modal-content {
  -webkit-animation-name: animateclose;
  -webkit-animation-duration: 0.9s;
  animation-name: animateclose;
  animation-duration: 0.9s;
  top: -300px;
}

/* Modal content if modal enabled: Show opening animation */
.modal-enabled .modal-content {
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.9s;
  animation-name: animatetop;
  animation-duration: 0.9s;
  top: 0;
}

/* The Close Button */
.close {
  color: #cdcdcd;
  float: right;
  font-weight: bold;
  padding-right:5px;
  padding-top:5px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

Animated Modal with Header and Footer







  
  
   ×
    
      Some text in the Modal Body
      Some other text...

Closing Animation on Modal Popup

Answers (1)

Related Questions