JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列三：練習3 ── modal 互動視窗元件</h1>

<div class="control-btn-group">
  <button class="block-btn" onclick="loginModal()">點我登入帳號</button>
  <button class="block-btn" onclick="postModal()">點我新增貼文</button>
</div>

<div class="modal" id="login-modal">
  <div class="login-modal-div">
    <label for="user">帳號：</label>
    <input type="text" name="user" id="user" placeholder="帳號" required>

    <label for="password">密碼：</label>
    <input type="password" name="password" id="password" placeholder="密碼" required>

    <div class="block-btn-group">
      <button class="block-btn" onclick="">登入</button>
      <button class="block-btn btn-close" onclick="closeWindow()">關閉</button>
    </div>

    <button class="x-btn" onclick="closeWindow()">X</button>
  </div>
</div>

<div class="modal" id="post-modal">
  <div class="post-modal-div">
    <label for="headline">標題：</label>
    <input type="text" name="headline" id="headline" placeholder="標題" required>

    <label for="content">內文：</label>
    <textarea name="content" id="content" placeholder="內文" required></textarea>

    <div class="block-btn-group">
      <button class="block-btn" onclick="">張貼</button>
      <button class="block-btn btn-close" onclick="closeWindow()">關閉</button>
    </div>

    <button class="x-btn" onclick="closeWindow()">X</button>
  </div>
</div>

<div class="lorem">
  <p>假文用來測試有捲軸的狀態下，彈跳視窗是否置中於瀏覽器視窗</p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus corporis quis asperiores voluptatem, fugit
  itaque cum accusantium earum sint, eos, architecto suscipit voluptatum! Vitae, et? Pariatur voluptatem sint
  expedita molestiae!
  Tempore delectus necessitatibus iusto nesciunt et neque iste voluptas porro veniam est quia, error ea fugiat
  similique. Numquam modi exercitationem, cumque eligendi animi quaerat? Saepe necessitatibus fugit minima
  reiciendis ea!
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100%;
}

.control-btn-group {
  width: 300px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}

.block-btn {
  padding: 5px 10px;
  line-height: 30px;
  font-size: 16px;
  font-weight: 900;
  border-radius: 10px;
  background-color: #aaa;
  border: none;
  color: #000;
  cursor: pointer;
  transition: 0.3s;
}

.block-btn:hover {
  background-color: #000;
  color: #fff;
}

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(100, 100, 100, 0.7);
  opacity: 0;
  z-index: -1;
  transition: 0.5s;
}

.modal.active {
  opacity: 1;
  z-index: 1;
}

.modal .login-modal-div,
.modal .post-modal-div {
  position: absolute;
  padding: 20px;
  background-color: #ccc;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 10px;
}

.modal .login-modal-div {
  width: 300px;
}

.modal .post-modal-div {
  width: 600px;
}

.modal label,
.modal input,
.modal textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.modal label {
  font-size: 18px;
  font-weight: 900;
}

.modal input,
.modal textarea {
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.5;
  margin: 5px 0 20px;
}

.modal textarea {
  resize: vertical;
  height: 300px;
}

.modal .block-btn-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal .block-btn-group .block-btn {
  width: 45%;
}

.modal .x-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  width: 20px;
  line-height: 20px;
  box-sizing: border-box;
  font-weight: 900;
  color: #aaa;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.modal .x-btn:hover {
  color: #000;
}

.lorem {
  font-size: 50px;
  line-height: 2;
  text-align: justify;
}

.lorem p {
  text-align: center;
}

JavaScript

function loginModal() {
  let window = document.querySelector("#login-modal");
  window.classList.add("active");
}

function postModal() {
  let window = document.querySelector("#post-modal");
  window.classList.add("active");
}

function closeWindow() {
  let activeBtn = event.target;
  let window = activeBtn.closest(".modal");
  window.classList.remove("active");
}