Animated And Customizable Alert Notifications - Nice Toast

Animated And Customizable Alert Notifications - Nice Toast
File Size: 113 KB
Views Total: 90
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A lightweight, customizable, animated toast plugin for jQuery that helps you create Android Material style alert notifications on the webpage.

More Features:

  • Custom position.
  • Countdown timer.
  • 5 notification types.
  • Change toast message dynamically.
  • Supports HTML content, not only plain text.

How to use it:

1. Import the jQuery Nice Toast plugin's files into the document.

<!-- Include Plugin CSS file -->
<link href="./dist/css/nice-toast-js.min.css" rel="stylesheet" />
<!-- Include jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Include Plugin JS file -->
<script src="./dist/js/nice-toast-js.min.js"></script>

2. Use the following methods to create different types of toasts.

// default
$.niceToast('Toast Message Here');

// info
$.niceToast.info('Toast Message Here');

// success
$.niceToast.success('Toast Message Here');

// warning
$.niceToast.warning('Toast Message Here');

// error
$.niceToast.error('Toast Message Here');

3. Change the position of the toasts.

  • top-center (default)
  • top-right
  • top-left
  • bottom-center
  • bottom-right
  • bottom-right
$.niceToast.setup({
  position: "top-center"
});

4. Determine How long the toast lasts. By default, the toast message will auto dismiss itself after 5 seconds.

$.niceToast.setup({
  timeout: 10000
});

5. Determine whether to show a countdown timer at the bottom of each toast message. Default: true.

$.niceToast.setup({
  progressBar: false
});

6. Change the toast message dynamically.

let toast = $.niceToast('Toast Message Here');
toast.change('redirecting ...' ,2000)

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