Basic Toast Notification Plugin For jQuery - JNotify

JNotify is a simple and flexible jQuery notification plugin that displays full configurable toast messages on your web page or web app.

Features:

• Simple to use.
• All the styles can be set in the JavaScript.
• Can be positioned anywhere on your screen.
• Custom toast messages.
• Close button.
• Auto hides after a timeout.
• 4 built-in themes: warning, info, success and error.

How to use it:

1. Add jQuery library and the jQuery JNotify plugin to your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.jnotify.js"></script>

2. Display a default toast message with one JS call.

var jNotify = $.JNotify();

3. Customize your toast messages.

var jNotify = $.JNotify({
  
  // addional CSS class
  'className':'JNotify-danger', 

  // warning, info, success or error
  'theme':'error', 

  // background color
  'backgroundColor':'#D9EDF7', 

  // border color
  'borderColor':'#BCE8F1',

  // border radius
  'borderRadius':'3px', 

  // left, center or right
  'position':'center',

  // max width
  'maxWidth':'250px',

  // top position
  'top':8, 

  // z-index
  'zIndex': 888,

  // height
  'height':null, 

  // padding
  'padding':'15px',

  // custom message
  'message':'This is a toast message.',

  // font size
  'fontSize':'14px', 

  // font color
  'fontColor': '#31708F', 

  // auto close
  'autoClose':false,

  // shows a close button
  'showCloseButton':true,

  // show / close duration
  'showDuration':5000,  
  'closeDuration':1000
  
});

4. Advanced usages.

// hide the close button
jNotify.showCloseButton(false);

// set the position
jNotify.setPosition('left');

// close the toast notification
jNotify.close(jNotify.notifyContainer);

// set the theme
jNotify.setTheme('success');

// change the colors (borderColor,backgroundColor,fontColor)
jNotify.setThemeColor('#BCE8F1','#D9EDF7','#31708F');

// set the button radius
jNotify.setCloseButtonRadius();

// set the top offset
jNotify.setCloseButtonTop(10);

// set the width
jNotify.setWidth('100%');

// set the height
jNotify.setHeight(130);

Change log:

2015-08-03

• fixed Close bug

---

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