Minimal Growl-style Notification Plugin For jQuery - Notify.js

Notify.js is a very small jQuery plugin used for creating growl-style notification popups with custom position & type options.

How to use it:

1. Add jQuery library and the jQuery Notify.js plugin's JavaScript & CSS to the html page.

<link rel="stylesheet" href="css/jquery.notify.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.notify.js"></script>

2. Create a default 'Success' notification message that will be positioned at the bottom-right of the viewport.

$.Notify({
  text: 'Message Body',
  headerText: 'Message Title'
});

3. Create a 'Failure' notification message that will be positioned at the bottom-right of the viewport.

$.Notify({
  text: 'Message Body',
  headerText: 'Message Title',
  type: "failure",
});

4. Change the default position of the notification popups.

• top-left
• top-right
• bottom-left
• bottom-right

$.Notify({
  text: 'Message Body',
  headerText: 'Message Title',
  position: '"right-bottom"'
});

5. Trigger a function when the notification is finished.

$.Notify({
  complete: null
});

6. To create your own styles, just override the CSS rules in the CSS as you seen in the 'jquery.notify.css':

.success { background-color: #3dc763 !important; }

.failure { background-color: #ed3d3d!important; }

.popup {
  position: fixed;
  padding: 20px;
  padding-top: 5px;
  background: #fff;
  border-radius: 5px;
  color: white;
  z-index: 100;
}

.popup h2 {
  margin-top: 0;
  color: white;
  font-family: Arial, sans-serif;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .close:hover { color: #06D85F; }

.popup .content {
  max-height: 30%;
  overflow: auto;
  font-family: Arial;
}

...

---

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