Toast


Some toast message..!


Structure
<button onclick="showToast()">showToast</button>
<div id="toast">Some toast message..!</div>


style
<style>
*{box-sizing:border-box}
button {
  border:none;
  padding:8px 12px;
  cursor:pointer;
}
#toast {
  position: fixed;
  z-index: 999;
  left: 50%;
  bottom:0;
  transform: translateX(-50%);
  opacity:0;
  width: 250px;
  background-color: #64f9aa;
  text-align: center;
  border-radius: 2px;
  padding: 12px 16px;
  font-size: 18px;
  transition:0.5s;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  visibility:hidden;
}

#toast.show {
  visibility:visible;
  bottom: 40px;
  opacity:1;
}
</style>


Process
<script src="jquery.min.js"></script>
<script>
function showToast(){
  $("#toast").toggleClass("show");
  setTimeout(function(){$("#toast").toggleClass("show");}, 2500);
}
</script>

receipt
settings_ethernet