modal

by johnny890118

HTML

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

<div class="modal" id="login-modal">
  <div class="modal-content">
    <h2>
      Sign In
    </h2>
    <div class="signIn">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
      </svg>
      <input type="text">
    </div>
    <div class="signIn">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-key-fill" viewBox="0 0 16 16">
        <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
      </svg>
      <input type="password">
    </div>
    <div class="btn-in">
      <button class="btn-signin">
        Sign In
      </button>
    </div>
    <hr>
    <div class="btn-in">
      <button class="line">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-line" viewBox="0 0 16 16">
          <path d="M8 0c4.411 0 8 2.912 8 6.492 0 1.433-.555 2.723-1.715 3.994-1.678 1.932-5.431 4.285-6.285 4.645-.83.35-.734-.197-.696-.413l.003-.018.114-.685c.027-.204.055-.521-.026-.723-.09-.223-.444-.339-.704-.395C2.846 12.39 0 9.701 0 6.492 0 2.912 3.59 0 8 0ZM5.022 7.686H3.497V4.918a.156.156 0 0 0-.155-.156H2.78a.156.156 0 0 0-.156.156v3.486c0 .041.017.08.044.107v.001l.002.002.002.002a.154.154 0 0 0 .108.043h2.242c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.157Zm.791-2.924a.156.156 0 0 0-.156.156v3.486c0 .086.07.155.156.155h.562c.086 0 .155-.07.155-.155V4.918a.156.156 0 0 0-.155-.156h-.562Zm3.863 0a.156.156 0 0 0-.156.156v2.07L7.923 4.832a.17.17 0 0 0-.013-.015v-.001a.139.139 0 0 0-.01-.01l-.003-.003a.092.092 0 0 0-.011-.009h-.001L7.88 4.79l-.003-.002a.029.029 0 0...

CSS

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

.modal-content{
  border-radius: 10px;
  background-color: white;
  margin: 50% auto;
  width: 70%;
  box-shadow: 0px 0px 15px #4F4F4F;
}

#login-modal input {
  background-color: #F0F0F0;
  border: hidden;
  margin: 5px;
  height: 50px;
  width: 400px;
  padding: 0px;
}

.signIn svg {
  background-color: #F0F0F0;
  margin: 5px;
  color: #5b5b5b;
  padding: 10px;
}

#login-modal .signIn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-in {
  display: flex;
  justify-content: center;
}

.btn-signin {
  height: 50px;
  width: 460px;
  border: hidden;
  background-color: #CA8EFF;
  color: white;
  font-size: 17px;
  margin: 25px 0px;
}

#login-modal hr {
  width: 500px;
}

.line {
  background-color: rgb(0, 184, 79);
  height: 50px;
  width: 460px;
  border: hidden;
  color: white;
  font-size: 17px;
  margin: 25px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-in svg {
  background-color: rgb(0, 184, 79);
  margin-right: 10px;
}

h2 {
  color: white;
  background-color: #3C3C3C;
  text-align: center;
  padding: 20px 0px;
  border-radius: 10px 10px 0 0;
  margin-top: 0px;
}

.btn-end {
  display: flex;
  justify-content: end;
}

.btn-close {
  background-color: transparent;
  color: #8E8E8E;
  border: hidden;
  padding: 5px 10px;
  font-size: 17px;
}

.btn-close:hover {
  background-color: #3C3C3C;
  color: white;
}

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

#post-modal .title,
.content,
.post {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.post button {
  border: hidden;
  background-color: #CA8EFF;
  color: white;
  font-size: 17px;
  height: 50px;
  width: 500px;
  padding: 0px;
...

JavaScript

let loginmodal = document.querySelector("#login-modal");
let postmodal = document.querySelector("#post-modal");

function loginModal() {
  loginmodal.style.display = "block";
}

function closebtn() {
  loginmodal.style.display = "none";
}

function postModal() {
  postmodal.style.display = "block";
}

function closebtn2() {
  postmodal.style.display = "none";
}