Customizable Growl Notification Plugin - Bootstrap Notify

A multi-functional jQuery notification plugin which makes use of Bootstrap alerts component to generate highly customizable growl-style notifications on the web page.

The Bootstrap 5 Version is now available here

Main features:

• Custom notification icons and images.
• Supports Bootstrap alerts types: success, info, warning and danger.
• Supports both jQuery and CSS3 animations.
• Can be placed anywhere on the web page.
• HTML content is supported.
• Tons of configurable options and API.

How to use it:

1. To use this plugin, make sure you've loaded jQuery library and Bootstrap framework in the document.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. Place the Bootstrap Notify's JavaScript bootstrap-notify.js at the end of the document and we're ready to go.

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

3. Display a default growl notification on the page.

$.notify("Message Here");

4. Add a title to the growl notification.

$.notify({
  title: "<b>Title</b>",
  message: "Message Here"
});

5. Add a custom icon or image to the growl notification.

// Use Bootstrap Glyphicons
$.notify({
  title: "<b>Title</b>",
  message: "Message Here",
  icon: 'glyphicon glyphicon-star'
});

// Use Font Awesome
$.notify({
  title: "<b>Title</b>",
  message: "Message Here",
  icon: 'fa fa-paw'
});

// Use custom image
$.notify({
  icon: "user.png",
  title: "<b>Title</b>",
  message: "Message Here",
},{
  icon_type: 'image'
});

6. Add a link to the growl notification.

$.notify({
  title: "<b>Title</b>",
  message: "Message Here",
  icon: 'glyphicon glyphicon-star',
  url: "https://www.jqueryscript.net",
  target: "_blank"
});

7. Customize the growl notification by passing the following settings object as the second parameter to the $.notify() function.

$.notify({
  title: "<b>Title</b>",
  message: "Message Here",
  icon: 'glyphicon glyphicon-star',
  url: "https://www.jqueryscript.net",
  target: "_blank"
},{

  // where to append the notification
  element: 'body',

  // static | fixed | relative | absolute
  position: null,

  // notification type
  type: "info",

  // is dismissable?
  allow_dismiss: true,

  // allows duplicate notifications
  allow_duplicates: true,

  // put the newest notification on the top
  newest_on_top: false,

  // shows a progress bar
  showProgressbar: false,

  // placement options
  placement: {
    from: "top",
    align: "right"
  },

  // offset in pixels
  offset: 20,

  // space between notifications
  spacing: 10,

  // z-index property
  z_index: 1031,

  // delay in milliseconds
  delay: 5000,

  // timer in millisconeds
  timer: 1000,

  // URL target property
  url_target: '_blank',

  // pause the timer on hover
  mouse_over: null,

  // animation options
  animate: {
    enter: 'animated fadeInDown',
    exit: 'animated fadeOutUp'
  },

  // or 'image'
  icon_type: 'class',

  // custom template
  template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">&times;</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
  
});

8. Event handlers.

$.notify({
  title: "<b>Title</b>",
  message: "Message Here",
  icon: 'glyphicon glyphicon-star',
  url: "https://www.jqueryscript.net",
  target: "_blank"
},{

  onShow: null,
  onShown: null,
  onClose: null,
  onClosed: null,
  onClick: null,

});

9. API methods.

var instance = $.notify('Message here');

// updates the options
instance.update(optionName, newValue);

// sets options globally
$.notifyDefaults({
  // options here
});

// closes the notification manually
instance.close();

// closes all notifications manullay
$.notifyClose();

---

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