Press "Enter" to skip to content

Jquery Plugin for Animated and Customizable Alert Notifications | Nice Toast JS

Nice Toast JS is a nice and easy plugin that helps you create material style alert notifications on the webpage.

toast notification javascript, toast notification jquery, toast notification example, bootstrap toast notification, toast message jquery codepen, react toast notification

More features:

  • Dedicated stand.
  • countdown.
  • 5 types of notifications.
  • Dynamically change toast message.
  • Supports HTML content, not just plain text.

How to make use of it:

1. Import the jQuery Nice Toast plugin’s information into the doc.

<!-- 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 next strategies to create several 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.

$.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 or not to indicate a countdown timer on the bottom of every toast message.

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

6. Change the toast message dynamically.

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

Animated And Customizable Alert Notifications, Nice Toast JS Plugin/Github, bootstrap toast notification jquery, jquery toaster


See Demo And Download

Official Website(hasan-ahani): Click Here

This superior jQuery/javascript plugin is developed by hasan-ahani. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.