Minimal Customizable Toast Notification In jQuery

td-message is a tiny, Android-inspired notification plugin to create toast-like notice/alert/announcement popups with custom icons, positions, durations, and styles.

More Features:

4 notification types: info, success, error, and warning.
Shows close button or not.
Can be placed anywhere on the web page.

How to use it:

Insert the following JavaScript and CSS files in the HTML page.

<link rel="stylesheet" href="/path/to/td-msessage.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/td-message.js"></script>

Show a default (info) toast message on the page.

$.message({
  text: "Info Message"
});

Create a ‘success’ toast message that automatically dismiess after 5 seconds (Default: 2 seconds).

$.message({
  type: "success",
  text: "Success Message",
  duration: 5000
});

Create an ‘error’ toast message that is placed at the bottom-right of the webpage. All possible position parameters:

top-left
top-center (default)
top-right
bottom-left
bottom-center
bottom-right

$.message({
  type: "error",
  text: "Error Message",
  positon: "bottom-right"
});

Create a ‘warning’ toast message with no close button.

$.message({
  type: "warning",
  text: "Warning Message",
  showClose: false
});

Download Details:

Author: shitudouya

GitHub: https://github.com/shitudouya/td-message

#jquery #javascript