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 Preview
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 |
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
});
Similar Code Snippets:
A Simple jQuery Quiz App
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.