Toast Notification JavaScript – Toastify JS is an easy, lightweight, vanilla JavaScript library used for sending stackable, non-blocking toast messages to end customers.

Advantages:

• Multiple notifications are stacked
• Customizable
• Not blocked from implementing the thread

Must Read: A Lightweight Toast Notification Snack Bar Component | Mosha Vue Toastify

How to make use of it:

Import the JavaScript file ‘toastify.js’ into the HTML document.

<script src="src/toastify.js"></script>

Create a toast message and specify in milliseconds to cover the notification.

var myToast = Toastify(
 text: "This is a toast message",
 duration: 5000
)

You are additionally allowed to load messages from a DOM node.

var myToast = Toastify()

Show the toast message. In this instance, the toast message will auto-dismiss after 5 seconds.

myToast.showToast();

The default CSS for the toast message. Copy and paste the CSS as a display on the web page.

.toastify 
  padding: 12px 20px;
  color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
  background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
  background: linear-gradient(135deg, #73a5ff, #5477f5);
  position: fixed;
  top: -150px;
  right: 15px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 2px;
  cursor: pointer;


.toastify.on { opacity: 1; }

Specify the container during which you wish to show the toast message.

myToast = Toastify()

Execute a callback function as you click on the toast message.

myToast = Toastify({
  text: "This is a toast message",
  duration: 5000,
  onClick: function(){}
})

Execute a callback function after the toast message is dismissed.

myToast = Toastify({
  text: "This is a toast message",
  duration: 5000,
  callback: function(){}
})

More configuration options.

myToast = Toastify({
  // On-click destination
  destination: null,

  // Open destination in new window
  newWindow: false,

  // Show toast close icon
  close: false,

  // Toast position - top or bottom
  gravity: 'bottom',

  // Toast position - left or right
  positionLeft: false,
  position: 'left'

  // Background color
  backgroundColor: "linear-gradient(135deg, #73a5ff, #5477f5)",

  // Avatar
  avatar: "",

  // Additional classes for the toast
  classeName: ""

  // Prevents dismissing of toast on hover
  stopOnFocus: true,

  // Toast offset
  offset: { x: 0, y: 0 }
})

See Demo And Download

Official Website(apvarun): Click Here

This superior jQuery/javascript plugin is developed by apvarun. For extra advanced usage, please go to the official website.