Content-Length: 72234 | pFad | https://dev.to/zaphoddont/most-basic-toast-notification-6b9

2 Simple toast notification - DEV Community

DEV Community

Will Sheppard
Will Sheppard

Posted on

Simple toast notification

Easy:

<button onclick="toast('foo')">Show Toast</button>

<script>
function toast(message) {
  var snackbar = document.createElement("div");
  snackbar.id = "snackbar";
  snackbar.innerText = message;
  document.body.appendChild(snackbar);

  snackbar.style.cssText = `
    visibility: visible;
    text-align: center;
    border: 2px solid black;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    opacity: 1;
  `;

  setTimeout(function() {
    snackbar.style.visibility = "hidden";
    snackbar.style.opacity = "0";
    document.body.removeChild(snackbar);
  }, 3000);
}
</script>
Enter fullscreen mode Exit fullscreen mode

(source)

Top comments (0)









ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: https://dev.to/zaphoddont/most-basic-toast-notification-6b9

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy