jQuery Plugin to Show Toast Notification – jToast

Modern, lightweight and easy to use jQuery plugin to show toast notification (alert messages) on the web page / web apps with cool CSS animations.

The plugin offers to trigger animated toast notification on different JavaScript events to notify the users about the process.

Plugin Overview

Plugin: jToast
Author: Leonard Ginters
Licence: MIT Licence
Published: April 20, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.3.1 or Latest version

File Type: zip archive (HTML & JavaScript)
Package Size: 4.24 KB

How to Use Plugin to Show Toastr Notification :

1. Load the jQuery and jtoast.js file into your HTML page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- jtoast Js -->
<script src="js/jtoast.js"></script>

2. After that, create an event handler in DOM , such as button or any object you want.

<button id="btn1">Click me</button>

3. Now, call the plugin in your functions to trigger the notification on event. (The example below show the notification on click event).

$(document).ready(function(){

  $("#btn1").click(function(){
		   
   showToast('This a very example toast. Cool, right?');
		   
  });
		
});
		

4. All available options to customize the looking of the toast notification bar.

showToast('Message for notify goes here!', {
  duration: 5000, // The time interval after notification disappear 
  background: '#20b2aa', // Background color for toast notification 
  color: '#f1f1f1', //Text color 
  borderRadius: '15px' //Border Radius 
});