Tiny jQuery Toast Message/Notification Plugin - JTC-Toast

JTC-Toast is a tiny, cross-browser jQuery plugin for creating small toast messages & notifications on the webpage. Only one message can be shown at a time - if another message is already being shown, it will be hidden, and the new message displayed.

How to use it:

1. Include the jQuery JTC-Toast plugin's files in the webpage which has jQuery library included.

<link rel="stylesheet" href="assets/css/jtc-toast.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="assets/js/jtc-toast.js"></script>

2. Create your custom message for the toast notification following the markup structure like this:

<div id="toast-1" class="notification-container notification-hidden notification-closer" data-target="#toast-1">
  <p class="notification-message notification-closer" data-target="#toast-1">You have a new message!</p>
  <p class="notification-close notification-closer" data-target="#toast-1">X</p>
</div>

3. Create a trigger element to show the toast message.

<a class="notification-trigger" data-target="#toast-1">Fire notification</a>

4. You can also toggle the toast message in the JavaScript. Useful for displaying a toast notification on page load, without any trigger element.

// .showNotification(target, timeout);
jtctoast().showNotification("#toast-1", 4);

5. Specify the time to wait before hiding toast message in seconds:

jtctoast({
  defaultWaitTime: 7, // 7 seconds
})

6. Hide the toast message manually.

// seen: Whether to add the 'seen' class to the target after it has been hidden
jtctoast().hideNotification(target, seen);

Change log:

2016-09-09

• Compatible with RequireJS

2016-08-18

• Remove message counter from message text

2016-08-11

• update

2016-08-06

• Fix '<a>' tags not working in messages issue

2016-08-02

• Remove test function used to test scopes

2016-08-01

• Update missing data reference

---

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