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.

Features:

• 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="//code.jquery.com/jquery.min.js"></script>
<script src="js/notify.js"></script>

3. Display a default alert notification on the screen.

$.notify("Alert!");

4. Change the default notification type.

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

5. Change the default notification position.

$.notify("Alert!", {
  align:"center", 
  verticalAlign:"top"
});

6. Enable / disable notification animations.

$.notify("Alert!", {
  animation:true,
  animationType:"drop"
});

7. Add a Font Awesome icon to the notification.

$.notify("Alert!", {
  icon:"check"
});

8. Auto close after 5 seconds.

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

9. Apply your custom CSS styles to the notification.

$.notify("Alert!", {class:"my-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.