<button onclick="showMessage(Math.random())">toast</button>
.messageInfo{ position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; font-size: 30px; color: #fff; transition: .3s; transform: translateY(-100%); opacity: 0; animation:show .5s forwards;}
.messageInfo span{ display: inline-block; background: #333; border-radius: 30px; padding: 10px 30px;}
.hide{
visibility:visible;
opacity: 1;
transform: translateY(0);
animation:hide .5s forwards;
}
@keyframes show{
to {
visibility:visible;
opacity: 1;
transform: translateY(0)
}
}
@keyframes hide{
to {
visibility:hidden;
opacity: 0;
transform: translateY(-100%)
}
}
function showMessage(txt){
this.timer && clearTimeout(this.timer);
var oDiv = document.getElementById('messageInfo');
if(!oDiv){
oDiv = document.createElement('div');
oDiv.className = 'messageInfo';
oDiv.id = 'messageInfo';
document.body.appendChild(oDiv);
}
oDiv.innerHTML = '<span>'+txt+'</span>';
oDiv.classList.remove('hide');
this.timer =
setTimeout(function(){
oDiv.classList.add('hide');
},2000)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.