jQuery Simple Toast Plugin

1. Introduction

jToast is a lightweight jQuery plugin for website toast-like notifications. The plugin comes with many customization options, you can change:

• Text
• Duration
• Background
• Color
• Border radius
• Close icon
• Progress bar

2. Plugin Overview

Demo

3. How to install and use jToast jQuery plugin

Follow the below steps to install jToast jQuery plugin on your website.

3.1. Load jQuery library and jToast JavaScript in head section:

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

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

3.2. Use JavaScript showToast function to show toast notification:

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

4. Conclusion

In this article, we presented a modern and easy-going jToast jQuery plugin for creating Toasts on the websites. Toasts are a very popular way to show a user that some background processing has been completed successfully or with failure.