toast UI

by dfg312546

HTML

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

<div class="toast toast-success">
  訂購成功！可以查看 Email 確認訂單細節！
</div>
<div class="toast toast-error">
  抱歉，訂購失敗！請稍後重新嘗試
</div>

CSS

.toast.toast-success{
  display:none;
  text-align: center;
  border-radius:7px;
  padding:20px;
  background-color:#9ACD32;
  color:#006400;
}

.toast.toast-error{
  display:none;
  text-align: center;
  border-radius:7px;
  padding:20px;
  background-color:#F08080;
  color:#8B0000;
}

JavaScript

function toastSuccess() {
	document.querySelector('.toast.toast-success').style.display = "block"
  function closeToast () {document.querySelector('.toast.toast-success').style.display = "none"}
  setTimeout(closeToast,5000)
}

function toastError() {
		document.querySelector('.toast.toast-error').style.display = "block"
  function closeToast () {document.querySelector('.toast.toast-error').style.display = "none"}
  setTimeout(closeToast,5000)
}