error modal

by Ercan Cicek

HTML

<div id="relModal" class="drop">
  <span>An error occured</span><br />
  <button>RETRY</button>
</div>

CSS

html, body {
  position: relative;
  width: 100%;
  height: 100%;
}

#relModal {
  font-family: Verdana;
  font-weight: bold;
  position: absolute;
  top: -400px;
  transition: top .1s linear;
  left: 50%;
  transform: translate(-50%);
  padding: 2.5em;
  background-color: #F44336;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#relModal > img {
  width: 50px;
  height: 50px;
}

#relModal > button {
  width: 100%;
  margin-top: 2em;
  border: 0;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  border-radius: 2px;
  padding: 1em 0;
  background-color: #fff;
}

.drop {
    -webkit-animation: drop 1.25s ease-in-out forwards;
    animation: drop 1.25s ease-in-out forwards;
    transform-origin: top right;
}

@-webkit-keyframes drop {
    0% {
        -webkit-transform: translateX(-100%);
        top: -15em;
    }

    5% {
        -webkit-transform: translateX(-100%);
        top: -2%;
    }

    40% {
        -webkit-transform: translateX(-100%) rotate(-125deg);
        top: -2%;
    }

    60% {
        -webkit-transform: translateX(-100%) rotate(-80deg);
        top: -2%;
    }

    75% {
        -webkit-transform: translateX(-100%) rotate(-55deg);
    }

    100% {
        -webkit-transform: translateX(-50%) rotate(0);
        top: 50%;
    }
}

@keyframes drop {
    0% {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        top: -15em;
    }

    5% {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        top: -2%;
    }

    40% {
        -webkit-transform: translateX(-100%) rotate(-125deg);
        -ms-transform: translateX(-100%) rotate(-125deg);
        transform: translateX(-100%) rotate(-125deg);
        top: -2%;
    }

    67% {
        -webkit-transform: translateX(-100%) rotate(-80deg);
       ...

JavaScript

$("button").click(function() {
var $rm = $("#relModal");
	$rm.removeClass("drop");
  setTimeout(function() {
  	$rm.addClass("drop");
  }, 100);
});