HTML modal popup animation not working second time

Question

I have created the following code to display a popup, and it works fine with the animation I added afterwards to have a pop-out effect. However, if I close it and attempt to reopen it, the animation does not show? the modal just instantly appears. How do I fix it?

 <div id="overlay"> <div class="popout"> <p>Content you want the user to see goes here.</p> Click here to [<a href='#' onclick='overlay()'>close</a>] </div> </div> <style> #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align:center; z-index: 1000; } #overlay div { width:300px; margin: 100px auto; background-color: #fff; border:1px solid #000; padding:15px; text-align:center; } .popout { animation: popout 1s ease; -webkit-animation: popout 1s ease; } @keyframes popout { from{transform:scale(0)} 80%{transform:scale(1.2)} to{transform:scale(1)} } @-webkit-keyframes popout { from{-webkit-transform:scale(0)} 80%{-webkit-transform:scale(1.2)} to{-webkit-transform:scale(1)} } </style> <script> function overlay() { el = document.getElementById("overlay"); el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; } </script> <a href='#' onclick='overlay()'>Click here to show the overlay</a> 

Answer 1

Look at this please

<div id="overlay">
  <div>
    <p>Content you want the user to see goes here.</p>
    Click here to [<a href='#' onclick='overlay()'>close</a>]
  </div>
</div>

<style>
  #overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1000;
  }

  #overlay div {
    width: 300px;
    margin: 100px auto;
    background-color: #fff;
    border: 1px solid #000;
    padding: 15px;
    text-align: center;
  }

  .popout {
    visibility: visible !important;
    animation: popout 1s ease;
    -webkit-animation: popout 1s ease;
    -moz-animation: popout 1s ease;
    -ms-animation: popout 1s ease;
  }

  @keyframes popout {
    from {
      transform: scale(0)
    }
    80% {
      transform: scale(1.2)
    }
    to {
      transform: scale(1)
    }
  }

  @-webkit-keyframes popout {
    from {
      -webkit-transform: scale(0)
    }
    80% {
      -webkit-transform: scale(1.2)
    }
    to {
      -webkit-transform: scale(1)
    }
  }

  @-moz-keyframes popout {
    from {
      -moz-transform: scale(0)
    }
    80% {
      -moz-transform: scale(1.2)
    }
    to {
      -moz-transform: scale(1)
    }
  }


  @-ms-keyframes popout {
    from {
      -ms-transform: scale(0)
    }
    80% {
      -ms-transform: scale(1.2)
    }
    to {
      -ms-transform: scale(1)
    }
  }
</style>

<script>
  function overlay() {
    el = document.getElementById("overlay");
    var clases = el.className;
    if (clases.indexOf('popout') == -1) {
      el.className = 'popout';
    } else {
      el.className = '';
    }
  }

</script>

<a href='#' onclick='overlay()'>Click here to show the overlay</a>

https://jsfiddle.net/xapdhxv3/1/