Creating Animated Popup / Modal Login Form Using HTML, CSS & JavaScript

In this post we will learn how to create animated popup / modal login form using HTML, CSS and JavaScript. For this, initially we will create button on which we will attach "click"  event and then add login form inside the popup.

HTML

<div class="center">
  <button onclick="openLoginForm()">Login</button>
</div>
<div class="popup-overlay"></div>
<div class="popup">
  <div class="popup-close" onclick="closeLoginForm()">&times;</div>
  <div class="form">
    <div class="avatar">
      <img src="https://bit.ly/31pHqJb" alt="">
    </div>
    <div class="header">
      Member login
    </div>
    <div class="element">
      <label for="username">Username</label>
      <input type="text" id="username">
    </div>
    <div class="element">
      <label for="password">Password</label>
      <input type="password" id="password">
    </div>
    <div class="element">
      <button>Login</button>
    </div>
  </div>
</div>

CSS

body {
  font-family:"Raleway";
}
.center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.popup-overlay {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  z-index:1;
  background:rgba(0,0,0,0.5);
  display:none;
}
.popup {
  position:absolute;
  top:-150%;
  left:50%;
  transform:translate(-50%,-50%) scale(1.15);
  width:300px;
  height:440px;
  background:#f5f5f5;
  z-index:2;
  opacity:0;
  box-shadow:5px 5px 3px rgba(0,0,0,0.2);
  transition:transform 300ms ease-in-out,opacity 300ms ease-in-out;
}
body.showLoginForm .popup-overlay {
  display:block;
}
body.showLoginForm .popup {
  top:50%;
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.popup .popup-close {
  position:absolute;
  top:-10px;
  right:-10px;
  width:40px;
  height:40px;
  background:#555;
  color:#f5f5f5;
  font-size:25px;
  font-weight:600;
  text-align:center;
  border-radius:50%;
  cursor:pointer;
}
.popup .form .avatar {
  margin:30px 0px 20px;
  text-align:center;
}
.popup .form .avatar img {
  width:120px;
  border-radius:50%;
}
.popup .form .header {
  text-align:center;
  font-size:20px;
  font-weight:600;
  color:#222;
  margin:20px 0px;
}
.popup .form .element {
  padding:8px 20px;
}
.popup .form .element label {
  display:block;
  font-size:14px;
  color:#222;
  margin-bottom:5px;
}
.popup .form .element input {
  width:100%;
  padding:8px 10px;
  box-sizing:border-box;
  outline:none;
  border:1px solid #aaa;
  background:#eee;
  border-radius:5px;
}
.popup .form .element button {
  margin-top:5px;
  width:100%;
  padding:10px 0px;
  text-transform:uppercase;
  outline:none;
  border:none;
  font-size:15px;
  font-weight:600;
  border-radius:5px;
  cursor:pointer;
  background:#4889da;
  color:#f5f5f5;
}

JS

function openLoginForm(){
  document.body.classList.add("showLoginForm");
}
function closeLoginForm(){
  document.body.classList.remove("showLoginForm");
}