JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<script src="https://kit.fontawesome.com/41e2a8dba7.js" crossorigin="anonymous"></script>

<button onclick="toastSuccess()">成功訂購商品</button>
<hr>
<button onclick="toastError()">訂購商品失敗</button>

<div class="toast toast-success">
  <div class="toast-header">
    <strong>訂購成功！</strong>
    <i onclick="x()" class="fa-regular fa-xmark"></i>
  </div>
  <div>
    可以查看 Email 確認訂單細節！
  </div>
</div>

<div class="toast toast-error">
  <div class="toast-header">
    <strong>抱歉，訂購失敗！</strong>
    <i onclick="x()" class="fa-regular fa-xmark"></i>
  </div>
  <div>
    請稍後重新嘗試
  </div>
</div>

CSS

.toast {
  visibility: hidden;
  width: 250px;
  border-radius: 2px;
  box-shadow: 0 0 10px 5px rgba(71, 71, 71, 0.5);
  border-left: solid;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 14px;
}
.toast .toast-header {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
}

.toast-success {
  border-color: #0f5132;
  background-color: white;
  color: rgb(71, 71, 71);
}

.toast-error {
  border-color: #842029;
  background-color: white;
  color: rgb(71, 71, 71);
}

.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
          animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
i {
  size: 17px;
  color: rgb(103, 103, 103);
  margin-top: 0.3rem;
}
i:hover {
  cursor: pointer;
  scale: 1.2;
  color: #333;
}

JavaScript

function toastSuccess(){
   let success = document.querySelector(".toast-success");
   success.setAttribute("class", "toast show toast-success");
   setTimeout(function(){ success.className = "toast toast-success"; }, 5000);
   
      document.querySelector(".toast-error").className = "toast toast-error";
}

function toastError(){
   let error = document.querySelector(".toast-error");
   error.setAttribute("class", "toast show toast-error");
   setTimeout(function(){ error.className = "toast toast-error"; }, 5000);
   
      document.querySelector(".toast-success").className = "toast toast-success";
}

   function x(){
      event.target.parentElement.parentElement.className = "toast";
   }