Cool Notification JavaScript Library - Noty

noty is a cool and powerful jQuery Notification Plugin JavaScript library that allows you to create several types of messages as an alternative to the standard alert dialog. noty can be placed anywhere on your website and you can customize the text, animation, speed, buttons and much more with its options in the API.

Install via package managers:

# NPM
npm install noty

# Bower
bower install noty

All configuration options with default values:

{

  // top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight
  layout      : 'topRight',

  // or defaultTheme
  theme       : 'relax',

  // alert - success - error - warning - information - confirmation
  type        : 'alert',

  // notify text
  text        : '',

  // shows progress bar
  progressBar : false,

  // use queue feature
  dismissQueue: true,

  // custom template
  template    : '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',

  // animation odelay for closing event in millisecondsptions
  animation   : {
    open     : {height: 'toggle'},
    close    : {height: 'toggle'},
    easing   : 'swing',
    speed    : 500,
    fadeSpeed: 'fast'
  },

  // delay for closing event in milliseconds
  timeout     : false,

  // adds notification to the beginning of queue when set to true
  force       : false,

  // modal mode
  modal       : false,

  // maximum number of notifications
  maxVisible  : 5,

  // if true closes all notifications and shows itself
  killer      : false,

  // ['click', 'button', 'hover', 'backdrop']
  closeWith   : ['click'],

  // callbacks
  callback    : {
    beforeShow  : function () {
    },
    onShow      : function () {
    },
    afterShow   : function () {
    },
    onClose     : function () {
    },
    afterClose  : function () {
    },
    onCloseClick: function () {
    }
  },

  // custom buttons
  buttons     : false
  
}

Change logs:

v3.1.0 (2017-04-26)

• switched to es6-promise & babel-polyfill removed. visibilityControl option added

v3.1.0 (2017-04-19)

• modal option support
• Better page visibility flow
• sounds option support with conditions ('docVisible', 'docHidden')
• titleCount option support with conditions ('docVisible', 'docHidden')
• Now uses Promises for show & close flows with babel-polyfill (this will prevent some bugs)
• New theme nest (It's first stacked view theme, you should check, it's cool)
• and FINALLY Web Push Notifications support with Service Workers

v3.0.1 (2017-04-15)

• setTimeout API, function supports for animation.open & close properties
• added velocityjs example
• swiched to Standard js style guide, bye semicolons

v3 (2017-04-12)

• Update.

v2.4.11 (2017-01-17)

• Performance improvements for progressbar flow

v2.4.10 (2017-01-17)

• timeout progress bar option added

v2.3.11 (2016-12-21)

• update

v2.3.10 (2016-12-13)

• MaxVisible option for all layouts.

v2.3.8 (2016-01-12)

• Fixed: noty modifies the parameter value removing options such as 'theme'

v2.3.7 (2015-09-14)

• update

v2.3.6 (2015-08-13)

• parametrize fadeIn/fadeOut speed in options
• li count bug fixed

v2.3.5 (2015-04-06)

• update

v2.3.4 (2014-12-22)

• Fixed bugs.

v2.3.3 (2014-12-22)

• Fixed: noty with timeout and close by click for jquery > 1.7.2 work wrong

v2.3.0 (2014-11-20)

• New theme: Relax
• Animate.css support added

v2.2.10 (2014-10-23)

• amd compability

v2.2.9 (2014-09-26)

• update.

v2.2.5 (2014-09-22)

• Fixed: Unable to close a noty that is opening
• Fixed: Click backdrop in modal close noty

v2.2.4 (2014-05-22)

• Refactoring! Use 2 space instead of tab char.

v2.1.4 (2013-12-09)

• add killer option

v2.1.3 (2013-12-07)

• fixed: Multiple custom selectors on one page issue

---

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