jQuery Plugin to Show Toast Notification – jToast

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	jToast
Author:	Leonard Ginters
Licence:	MIT Licence
Published:	January 17, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 2.3.1 or Latest version
File Type:	zip archive (HTML & JavaScript)
Package Size:	4.24 KB

Demo Download

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

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.