Creating Animated Popup / Modal / Dialogue Box using HTML, CSS & JavaScript

Popup boxes / Modal are useful way of showing an important information to the website visitors. In this post we will see how to create an animated popup box with zoom in effect and close button using HTML, CSS and JavaScript.

HTML

<div class="popup center">
  <div class="icon">
    <i class="fa fa-check"></i>
  </div>
  <div class="title">
    Success!!
  </div>
  <div class="description">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nihil provident voluptatem nulla placeat
  </div>
  <div class="dismiss-btn">
    <button id="dismiss-popup-btn">
      Dismiss
    </button>
  </div>
</div>
<div class="center">
  <button id="open-popup-btn">
    Open Popup
  </button>
</div>

CSS

body {
  background:#ddd;
  font-family:"Raleway";
}
.center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.popup {
  width:350px;
  height:280px;
  padding:30px 20px;
  background:#f5f5f5;
  border-radius:10px;
  box-sizing:border-box;
  z-index:2;
  text-align:center;
  opacity:0;
  top:-200%;
  transform:translate(-50%,-50%) scale(0.5);
  transition: opacity 300ms ease-in-out,
              top 1000ms ease-in-out,
              transform 1000ms ease-in-out;
}
.popup.active {
  opacity:1;
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  transition: transform 300ms cubic-bezier(0.18,0.89,0.43,1.19);
}
.popup .icon {
  margin:5px 0px;
  width:50px;
  height:50px;
  border:2px solid #34f234;
  text-align:center;
  display:inline-block;
  border-radius:50%;
  line-height:60px;
}
.popup .icon i.fa {
  font-size:30px;
  color:#34f234;
} 
.popup .title {
  margin:5px 0px;
  font-size:30px;
  font-weight:600;
}
.popup .description {
  color:#222;
  font-size:15px;
  padding:5px;
}
.popup .dismiss-btn {
  margin-top:15px;
}
.popup .dismiss-btn button {
  padding:10px 20px;
  background:#111;
  color:#f5f5f5;
  border:2px solid #111;
  font-size:16px;
  font-weight:600;
  outline:none;
  border-radius:10px;
  cursor:pointer;
  transition: all 300ms ease-in-out;
}
.popup .dismiss-btn button:hover {
  color:#111;
  background:#f5f5f5;
}
.popup > div {
  position:relative;
  top:10px;
  opacity:0;
}
.popup.active > div {
  top:0px;
  opacity:1;
}
.popup.active .icon {
  transition: all 300ms ease-in-out 250ms;
}
.popup.active .title {
  transition: all 300ms ease-in-out 300ms;
}
.popup.active .description {
  transition: all 300ms ease-in-out 350ms;
}
.popup.active .dismiss-btn {
  transition: all 300ms ease-in-out 400ms;
}

JS

document.getElementById("open-popup-btn").addEventListener("click",function(){
  document.getElementsByClassName("popup")[0].classList.add("active");
});

document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
  document.getElementsByClassName("popup")[0].classList.remove("active");
});