JSFiddle - React, Tailwind, and code Playground

by tsaii

HTML

<button onclick="loginModal()">點我登入帳號</button>
<hr>
<button onclick="postModal()">點我新增貼文</button>


<div class="modal" id='content'>
  <div class="login">
    <div>帳號：<input type="text"></div>
    <div>密碼：<input type="password"></div>
    <hr>
    <button class="btn-close">關閉</button>
  </div>
</div>
<div class="modal" id="post-modal">
  <div class="login">
    <div>標題：<input type="text"></div>
    <div>內文：<textarea></textarea></div>
    <button class="btn-close">關閉</button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

/* .login-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
} */

#content,#post-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
}

.login {
  background-color: #F8E7E7;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #888;
  width: 300px;
}
.btn-close{
  margin: 5px;
  background-color: #E19898;
  border: none;
  padding: 5px;
  border-radius: 3px;
}

JavaScript

let btn = document.querySelectorAll('.btn-close')


function loginModal() {
  let login = document.querySelector('#content');
  login.style.display = 'block';
}

function postModal() {
  let post = document.querySelector('#post-modal');
  post.style.display = 'block';
}

for (let closebtn of btn) {
  closebtn.onclick = remove
}

function remove() {
  event.target.closest('.modal').style.display = 'none'
}

window.onclick = function(event) {
  let modal = document.querySelector('#content')
  let modal1 = document.querySelector('#post-modal')
  if (event.target == modal) {
    modal.style.display = "none";
  } else if (event.target == modal1) {
    modal1.style.display = "none"
  }
}