JSFiddle - React, Tailwind, and code Playground

by kushmuffin

HTML

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

<div class="modal" id="login-modal">
  <div class="login">
    <div>帳號：<input type="text"></div>
    <div>密碼：<input type="password"></div>
    <hr>
    <button onclick="btn_close()" class="btn-close">關閉</button>
  </div>
</div>

<div class="modal" id="post-modal">
  <div class="content">
    <div>標題：<input type="text"></div>
    <div>內文：<textarea>密碼3345678</textarea></div>
    <hr>
    <button onclick="btn_submit()" class="btn-submit">送出</button>
  </div>
</div>

CSS

body{
  background-color: wheat;
  text-align: center;
}

/* 切換的那一層 負責遮罩部分 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 實際的 Modal 彈出框 */
.modal > div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 按鈕 */
.btn-close,
.btn-submit
{
  margin-top: 10px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.content > div{
  display: flex;
  white-space: nowrap;
}

JavaScript

let modal = document.querySelector('#login-modal');

let close = document.querySelector('#post-modal');

function loginModal(){
	modal.style.display = 'block';
}

function postModal(){
	close.style.display = 'block';
}

function btn_close(){
	modal.style.display = 'none';
}

function btn_submit(){
	close.style.display = 'none';
}

window.onclick = function(event) {
  if (event.target == modal || event.target == close) {
    modal.style.display = "none";
    close.style.display = "none";
  }
}