Csarg Csarg - 2 months ago 13
CSS Question

HTML modal popup animation not working second time

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

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/

Comments