Creating Growl Notifications with jQuery and Bootstrap - Notify.js

Notify.js is a lightweight jQuery plugin that takes advantage of Bootstrap's alert component to display various types of growl notifications in your web project.

Features:

• Easy to use.
• Fully styleable via CSS.
• Auto close after a specified time.
• Callback functions.

How to use it:

1. Load jQuery library and Bootstrap 3 framework in your web project.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

2. Load the notify.js jQuery plugin after jQuery library.

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

3. Create a container to place your notifications.

<div id="notifications"></div>

4. Basic usage:

// Notify((text, callback, close_callback, style));
Notify("Danger", null, null, 'danger');
Notify("Success", null, null, 'success');
Notify("Warning", null, null, 'warning);
Notify("Info", null, null, 'info');

5. Add custom CSS to style & position these growl notifications.

#notifications {
  cursor: pointer;
  position: fixed;
  right: 0px;
  z-index: 9999;
  top: 0px;
  margin-top: 22px;
  margin-right: 15px;
  max-width: 400px;   
}

---

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