Intuitive Toast-like Popup Messages In Vanilla JavaScript

Preview:

Description:

This is a lightweight JavaScript library for creating simple, nonintrusive, toast-like popup messages that appear at the bottom or top of your screen. Perfect for deliverying important information to your users without interrupting their flow.

It’s easy to implement and customize, and it doesn’t require any additional frameworks or dependencies. You get four built-in toast types: Success, Warning, Danger, and Info, each with its own distinct color scheme and icon. This makes it easy to visually communicate the nature of the message to your users.

Another cool feature I appreciate is the countdown timer displayed at the bottom of each toast. This timer shows users how long the message will be visible before it dismisses automatically.

How to use it:

1. Download & unzip the package and then load the following files on the page.

<link rel="stylesheet" href="Toast.css" />
<script src="Toast.js"></script>

2. To display a toast message on the screen, just call the ShowToast() function and pass the following parameters:

• message: Toast message
• toastType: “info”, “warning”, “danger”, or “success”
• duration: Auto-dismiss the toast message after this timeout

ShowToast(
  message = "Test Message",
  toastType = "info",
  duration = 5000
)

3. Override the default toast styles to create your own themes.

.toast {
  position: fixed;
  bottom: 255px;
  right: 50%;
  margin-right: -150px;
  width: 250px;
  max-width: 300px;
  background: #fff;
  padding: 0.5rem;
  border: 1px solid #aaa;
  border-radius: .25rem;
  box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transform: translateY(110%);
}