Cách tạo popup login bằng Javascript và CSS

Hôm nay mình sẽ chia sẻ code hiển thị Popup, cụ thể là form login. Nó cũng khá là đơn giản, không có hiệu ứng.

Các bạn có thể thực hành ở trên Fiddle

1. Đoạn HTML hiển thị Popup

<h2>Ví dụ Popup từ xehanoi.info</h2>
<p>Bấm vào nút bên dưới để mở form</p>
<div class="openBtn">
  <a class="openButton" href="https://xehanoi.info">Click test</a>
  <button class="openButton" onclick="openForm()"><strong>Mở Form</strong></button>
</div>
<div class="loginPopup">
  <div class="formPopup" id="popupForm">
    <form action="" class="formContainer">
      <h2>Please Log in</h2>
      <label for="email"><strong>E-mail</strong></label>
      <input type="text" id="email" placeholder="Your Email" name="email" required>
      <label for="psw"><strong>Password</strong></label>
      <input type="password" id="psw" placeholder="Your Password" name="psw" required>
      <button type="submit" class="btn">Đăng nhập</button>
      <button type="button" class="btn cancel" onclick="closeForm()">Đóng</button>
    </form>
  </div>
</div>
<div id="popupBkgr"></div>

2. Đoạn CSS

.openBtn {
  display: flex;
  justify-content: left;
}
.openButton {
  border: none;
  border-radius: 5px;
  background-color: #1c87c9;
  color: white;
  padding: 8px 20px;
  cursor: pointer;
  margin-left: 5px;
}
.loginPopup {
  position: relative;
  text-align: center;
  width: 100%;
}
.formPopup {
  display: none;
  position: fixed;
  left: 45%;
  top: 5%;
  transform: translate(-50%, 5%);
  border: 3px solid #999999;
  z-index: 9;
}
.formContainer {
  max-width: 300px;
  padding: 8px;
  background-color: #fff;
}
.formContainer input[type=text],
.formContainer input[type=password] {
  width: 90%;
  padding: 15px 5px;
  margin: 5px 0 20px 0;
  border: none;
  background: #eee;
}
.formContainer input[type=text]:focus,
.formContainer input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
.formContainer .btn {
  padding: 12px 20px;
  border: none;
  background-color: #8ebf42;
  color: #fff;
  cursor: pointer;
  width: 90%;
  margin-bottom: 15px;
  opacity: 0.8;
}
.formContainer .cancel {
  background-color: #cc0000;
}
.formContainer .btn:hover,
.openButton:hover {
  opacity: 1;
}
#popupBkgr {
  display: none;
  z-index: 8;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
}

3. Đoạn javascript

Khi bấm vào nút “Mở Form” thì popup sẽ được bật ra. Bạn đóng form bằng cách bấm vào nút Đóng hoặc click vào nền màu xám phía ngoài form.

function openForm() {
  document.getElementById("popupForm").style.display = "block";
  document.getElementById("popupBkgr").style.display = "block";
}
function closeForm() {
  document.getElementById("popupForm").style.display = "none";
  document.getElementById("popupBkgr").style.display = "none";
}
//Đoạn này giúp đóng form bằng cách click vào nền màu xám
$("#popupBkgr").click(function(){
  document.getElementById("popupForm").style.display = "none";
  document.getElementById("popupBkgr").style.display = "none";
});