Created
October 13, 2021 15:06
-
-
Save shimondoodkin/274b1e7ecd5ad13095a4db706e621c05 to your computer and use it in GitHub Desktop.
tiny vanilla JavaScript toast notification
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var toast_top=8; | |
function toast(text,timeoutMs) | |
{ | |
let atoast = document.createElement('div'); | |
with(atoast.style) { | |
backgroundColor='#fef7e6'; border='1px solid #f0ac00'; | |
boxShadow='5px 10px #888888'; color='#000000'; padding='8px'; | |
left="50%"; width='-50%'; top=toast_top+'px'; display='block'; position='fixed'; | |
zIndex=10000; } | |
atoast.innerText=text; | |
document.body.appendChild(atoast); | |
let height=atoast.offsetHeight; toast_top+=height; | |
setTimeout(()=>{ document.body.removeChild(atoast); toast_top-=height; },timeoutMs); | |
} | |
toast("hello",1500) | |
setTimeout( ()=>{ | |
toast("hello",1500) | |
},500) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
JavaScript notification popup with no dependencies, like a one-liner.
copy paste into the console to see it