Handy Toast Like Alert Notification Plugin - jQuery Notify

File Size: 16.6 KB
Views Total: 541
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Handy Toast Like Alert Notification Plugin - jQuery Notify

Notify is a small, handy jQuery notification plugin which helps you create Android toast-like alert and loading popups with custom icons on the web page.

How to use it:

1. Add the jQuery Notify plugin's files to the page, after you've added jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="dist/notify/notify.min.css" rel="stylesheet">
<script src="dist/notify/notify.min.js"></script>

2. The JavaScript to create toast notifications. Possible parameters:

  • notification: notification message
  • timeout: timeout in milliseconds. -1 = always visible
  • theme: "success", "information", "error", "attention"
  • hasMaskLayer: whether to display the background overlay
  • isLoading: shows loading animation
$.notify(notification, timeout, theme, hasMaskLayer, isLoading);

3. More examples.

// shows a default toast notification
// auto closes after 3 seconds
// with a background overlay
// with a loading animation
$.notify("default notify", 3000, "", true, true);

// shows a SUCCESS toast notification
// auto closes after 3 seconds
// without background overlay
// without loading animation
$.notify("success notify", 3000, "success", false, false);

// shows an ATTENTION toast notification
// auto closes after 3 seconds
// with a background overlay
// without loading animation
$.notify("attention notify", 3000, "attention", true, false);

// shows an INFORMATION toast notification
// auto closes after 3 seconds
// without background overlay
// with a loading animation
$.notify("information notify", 3000, "information", false, true);

// shows an ERROR toast notification
// always visible
// with a background overlay
// without loading animation
$.notify("error notify", 3000, "error", true, false);

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