Simple Flexible jQuery Alert Notification Plugin - notify.js

File Size: 17.8 KB
Views Total: 15538
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Flexible jQuery Alert Notification Plugin - notify.js

notify.js is a simple, flexible, customizable jQuery notification plugin which allows to show alert messages of various types to your end users.


  • 5 types: default, toast, info, success, warning and danger.
  • Custom horizontal and vertical positions.
  • 3 animation types: fade, drop and scale.
  • Custom text & background colors.
  • Custom fullscreen background overlay.
  • Notification icons. Requires Font Awesome 4.
  • Auto close after a specified timeout.
  • Easy to add your own CSS styles.

Basic usage:

1. Load Font Awesome (OPTIONAL) and the jQuery notify.js plugin's stylesheet in the header of the document.

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

2. Load jQuery library and the jQuery notify.js plugin's script in the footer of the document.

<script src="//"></script>
<script src="js/notify.js"></script>

3. Display a default alert notification on the screen.


4. Change the default notification type.

$.notify("Alert!", {type:"info"});

5. Change the default notification position.

$.notify("Alert!", {

6. Enable / disable notification animations.

$.notify("Alert!", {

7. Add a Font Awesome icon to the notification.

$.notify("Alert!", {

8. Auto close after 5 seconds.

$.notify("Alert!", {delay:5000});

9. Apply your custom CSS styles to the notification.

$.notify("Alert!", {class:"my-class"});

10. All default configuration options.

$.notify("Alert!", {

  // timeout
  delay: 3000,

  // default, toast, info, success, warning or danger
  type: "default",

  // left, center, right
  align: "center",

  // top, middle, bottom
  verticalAlign: "top",

  // opacity level of background overlay
  blur: 0.2,

  // displays a close icon
  close: false,

  // background color
  background: "",

  // text color
  color: "",

  // custom CSS class
  class: "",

  // enable animation
  animation: true,

  // fade, drop or scale
  animationType: "drop",

  // custom icon
  icon: "",

  // custom buttons
  buttons: [],
  buttonFunc: [],
  buttonAlign: "center",

  // width of the notification
  width: "600px"

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