Intuitive Toast-like Popup Messages In Vanilla JavaScript

Category: Javascript , Notification | March 29, 2024
Author:PerplexingPerfectionist
Views Total:41 views
Official Page:Go to website
Last Update:March 29, 2024
License:MIT

Preview:

Intuitive Toast-like Popup Messages In Vanilla JavaScript

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%);
}

You Might Be Interested In:


Leave a Reply