Advanced Toast Notification Plugin - jQuery Toasts.js

A tiny, easy yet customizable jQuery Toast notification plugin to display sliding, stacked, non-blocking notification popups inspired by Android Toast.

How to use it:

1. Insert the stylesheet jquery.toasts.css and JavaScript jquery.toasts.js into the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/jquery.toasts.css" />
<script src="/path/to/jquery.toasts.js"></script>

2. To display a toast, just define the toast message in the toast attribute of a trigger element and the plugin will do the rest.

<button toast="This is a basic toast">Simple Toast</button>

3. Determine the time to wait before auto dismissing the toast message. Default: 5000ms.

<button toast="This is a basic toast" toast-timeout="1000">Simple Toast</button>

4. Display a close button inside the toast message.

<button toast="This is a basic toast<a class='close'>&times;</a>">Simple Toast</button>

5. You are also allowed to create toast messages programmatically:

$.toast('Example Toast!');
$.toast('Example Toast!', 1000);
$.toast('Example Toast! <a class="close">&times;</a>');

6. Execute a function when the user clicks on the toast message.

$.toast(
  'Click me!', // content
  5000, // timeout
  function () {
    alert('Hello world!');
  } // click event
);

7. Execute a function when the user clicks on the toast message.

$.toast(
  'Wait for me!', // content
  5000, // timeout
  function () { }, // click event
  function () {
    alert('I am closed!');
  } // closed event
);

8. Execute a function when the user hovers over the toast message.

$.toast(
  'Hover me!', // content
  5000, // timeout
  function () { }, // click event
  function () { }, // closed event
  function () {
    alert('Hi :)');
  } // mouse enter event
);

9. Execute a function when the cursor is moved out of the toast message.

$.toast(
  'Hover me!', // content
  5000, // timeout
  function () { }, // click event
  function () { }, // closed event
  function () { }, // mouse enter event
  function () {
    alert('Bye');
  } // mouse leave event
);

Changelog:

2020-11-23

• big update for jquery-toasts.js

2020-11-21

• Code refactor

---

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