Easy Non-blocking Notification Plugin With jQuery - KanNotify.js

Easy Non-blocking Notification Plugin With jQuery - KanNotify.js
File Size: 11.7 KB
Views Total: 945
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

KanNotify.js is a lightweight and easy-to-use jQuery plugin that presents your notification messages of various types with custom positions and icons.


  • Can be positioned anywhere on the webpage via CSS.
  • 5 notificaiton types: success, error, info, warning and default.
  • Supports any iconic font. E.g. Font Awesome.
  • Allows to auto dismiss after a specific timeout.

How to use it:

1. To get started, you need to load jQuery and the jQuery KanNotify.js plugin's files in the document as shown below:

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

2. Load the Font Awesome for the notification icons (OPTIONAL).

<link rel="stylesheet" href="font-awesome.min.css">

3. Create a basic notification with custom message:

$.kanNotify.add('Message Here');
// or
$.kanNotify.add({msg:'Message Here'});

4. The JavaScript to close the notifications manually:

// close a notification with a fadeOut effect

// close all the notifications

5. More API methods:

$.kanNotify.success('Success Message Here');
$.kanNotify.error('Error Message Here');
$.kanNotify.warning('Warning Message Here');
$.kanNotify.info('Information Message Here');

6. All default options to customize the notification plugin.


  // custom position

  // enable fade effect
  fade : false,

  // animation speed
  fade_out_speed: 300,

  // timeout

  // is dismissable
  allow_dismiss : true,

  // wrapper's width
  wrapperWidth : "auto",

  // notification type

  // custom icons
  iconDefault : {'info':'fa-info-circle','error':'fa-exclamation-circle','success':'fa-check-circle','warning':'fa-warning','default':'fa-chevron-circle-right','debug':'fa-bug'}

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