Toast Notification Popup With Fade In/Out Transitions - jNotify

jNotify is a tiny yet customizable notification jQuery plugin for creating Material Design style toast notification popups with configurable fade in/out transitions.

See Also:

• 10 Best Toast Notification JavaScript Plugins
• 10 Best Snackbar Plugins In JavaScript

How to use it:

1. Include both jQuery and the jNotify plugin on the page.

<link rel="stylesheet" href="/path/to/src/notify.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/notify.min.js"></script>

2. Display a basic toast notification popup using the jNotify.push method.

jNotify.push('Toast Title', 'Toast Message Here');

3. Set the notification type:

• success
• warning
• error
• info

jNotify.push('Success', 'Success Message Here',{
  type: 'success'
});

4. Or using the following JavaScript syntax.

jNotify.success('Success', 'Success Message Here',{
  // options here
});

jNotify.warning('Warning', 'Warning Message Here',{
  // options here
});

jNotify.error('Error', 'Error Message Here',{
  // options here
});

jNotify.info('Info', 'Info Message Here',{
  // options here
});

5. Available options to config the toast notification.

jNotify.push('Toast', 'Toast Message Here',{

  /**
   * Notification delay before dissapearing.
   * */
  delay: 2500,

  /**
   * Fade-in and fade-out transition delay.
   * */
  fadeDelay: 1000,

  /**
   * Indicates whether a close button must be rendered on the notification.
   * */
  closeButton: false,

  /**
  * Indicates whether the title must be displayed in bold.
  * */
  titleBold: true,

  /**         
   * Offset heigth in pixels from bottom.
   * */
  offset: 40,

});

---

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