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>