Minimal Non-blocking Toast Notifiction Plugin - jQuery Message Toaster

Minimal Non-blocking Toast Notifiction Plugin - jQuery Message Toaster

Message Toaster is a simple, lightweight jQuery plugin create for displaying unobtrusive, non-blocking, and highly customizable toast (temporary) notifications on the screen. By default, the toast notification appears at the Bottom Right of the webpage and will auto fade out after 5 seconds.

1. Import both jQuery JavaScript library and the jQuery Message Toaster plugin's JavaScript file toaster.js into the html file.

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

2. Create a new Message Toaster instance and specify the message to be displayed in the toast notification.

var toaster = new Toaster({
    text: "Hello World"

3. Display the toast notification on the screen.


4. To customize the appearance of your toast notifications just by overriding the following options:

var toaster = new Toaster({
    // text color
    color: "#FFF",
    // background color
    background: "#333",
    // width
    width: "290px",
    // height
    height: "40px",
    // padding
    padding: "5px",
    // border radius
    cornerRadius: "5px"

5. Re-position the toast notifications.

var toaster = new Toaster({
    verticalPosition: "bottom",
    horizontalPosition: "right"

This awesome jQuery plugin is developed by rudrakshpathak. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 02.12.2017
  • Source