JSFiddle - React, Tailwind, and code Playground

by hungqh87

HTML

<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>Open Form</strong></button>
</div>
<div class="loginPopup">
  <div class="formPopup" id="popupForm">
    <form action="/action_page.php" 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">Log in</button>
      <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
    </form>
  </div>
</div>
<div id="popupBkgr"></div>

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;
}

JavaScript

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";
}
$("#popupBkgr").click(function(){
	document.getElementById("popupForm").style.display = "none";
	document.getElementById("popupBkgr").style.display = "none";
});