Confirmation popup animation

by Shuaib Khan

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class="container">
 
  <div class="pop-cont">
    <h4 class="heading">
    Are you sure you want to delete this Item 
    </h4>
    <div class="trigger"></div>
  <svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 37 37" style="enable-background:new 0 0 37 37;" xml:space="preserve">
<path class="circ path" style="fill:none;stroke:#1eba5c;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" d="
	M30.5,6.5L30.5,6.5c6.6,6.6,6.6,17.4,0,24l0,0c-6.6,6.6-17.4,6.6-24,0l0,0c-6.6-6.6-6.6-17.4,0-24l0,0C13.1-0.2,23.9-0.2,30.5,6.5z"
	/>
<polyline class="tick path" style="fill:none;stroke:#1eba5c;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	11.6,20 15.9,24.2 26.4,13.8 "/>
</svg>
  </div>
  <div class="btns">
    <a class="main-btn delete">
      Delete
    </a>
    <a class="main-btn no">
      No
    </a>
  </div>
  
  
  
</div>

CSS

body {
    padding: 5px;
		background-color: #f1f1f1;
}
h4, .main-btn.no{
  display:none;
}
.container{
  width:100%;
  height:400px;
  position:relative;
}
.main-btn{
  width: 250px;
  max-height: 40px;
  border:none;
  padding: 10px 15px;
  text-align: center;
  background-color: #dd2626;
  position:absolute;
  top:0;
  bottom:-120px;
  left:0;
  right:0;
  margin: auto;
  color:#fff;
  font-size:32px;
  border-radius: 8px;
  cursor:pointer;
  font-family: 'Roboto';
  font-weight: 200
}
.main-btn.no{
  bottom:-250px;
  background-color: #ccc;
  color: #4d4d4d;
  font-weight: 200
}
.main-btn.no:hover{
  background-color: #aaa
}
.main-btn:hover, .main-btn:active, .main-btn:visited{
  background-color: #b32e2e;
  outline: 0;
}
.pop-cont{
  position:absolute;
  padding: 25px 35px;
  box-sizing: content-box;
  font-family: 'roboto';
  font-weight: 100;
  width: 200px;
  height: 10px;
  border: 1px solid #f1f1f1;
  box-shadow: 0 0 15px #eee;
  top:0;
  left:0;
  bottom:-120px;
  right: 0;
  margin: auto;
  border-radius: 10px;
  transition: all ease-in 0.2s;
  background-color: #fff
}
.heading{
  font-size: 42px;
  text-align:center;
  font-weight: 100;
}
.pop-cont.open{
 /*  width: 450px;
  height: 300px;
  bottom: 0; */
  animation-name: bounce;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes bounce {
        0%   { width: 250px; height: 40px; bottom:-120px }
        10% { width: 280px; height: 100px; bottom: -100px }
        30%  { width: 350px; height: 150px; bottom: -80px }
        50%  { width: 450px; height: 300px; bottom: -60px }
        60%  { width: 480px; height: 320px; bottom: -40px }
        70%  { width: 520px; height: 350px; bottom: -20px }
        80%  { width: 480px; height: 320px; bottom: 0px }
        85%  { width: 450px; height: 300px; bottom: 20px }
        90%  { width: 420px; height: 250px; bottom: 40px }
        95%  {  width: 440px; height:...

JavaScript

$(document).ready(function() {

 	$(".main-btn.delete").on("click", function(e){
  let $this = $(this);
  	$(".pop-cont").addClass("open");
    setTimeout(function(){
    	showItems($this);
    }, 200)
  });
});

function showItems($_this){
  if($_this.hasClass("yes")){
    return false;
  }else{
    $_this.parents(".container").find("h4").fadeIn();
    $_this.parent().find(".main-btn.no").fadeIn();
    $_this.text("Yes")
    $_this.removeClass("delete").addClass("yes")
  }
}


$(".btns").on("click", ".yes",function(e){
e.stopPropagation();
	let $_this = $(this);
  let $_trigger = $(".trigger");
	done($_this, $_trigger);
})

function done($this, $trigger){
	$this.parents(".container").find("h4").hide();
  $this.parents(".container").find(".btns").hide();
  $trigger.toggleClass("drawn");
}

$(".btns").on("click", ".no",function(e){
e.stopPropagation();
	let $_this = $(this).parent().find(".yes");
	 $_this.parents(".container").find("h4").hide();
    $_this.parent().find(".main-btn.no").hide();
    $_this.text("Delete")
    $_this.removeClass("yes").addClass(".delete");
    $(".pop-cont").removeClass("open");
})