Flat Style jQuery Bottom Right Notification Plugin - Notifications.js

Notifications.js is a notification library built with jQuery for creating flat styled notification bars sliding out from the right bottom of your page. The plugin currently comes with 4 built-in types of notifications: info, error, warning, success.

How to use it:

1. Create a button to trigger a notification bar.

<button id="showInfo">Show Info Notification</button>
<button id="showError">Show Error Notification</button>
<button id="showWarning">Show Warning Notification</button>
<button id="showSuccess">Show Success Notification</button>

2. Include the jQuery javascript library and notification.js script on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="notifications.min.js"></script> 

3. Call the plugin.

<script>
$('#showError').on('click', function(e) {
    displayNotification('error', 'This is an error notification', 2000);
    e.preventDefault();
});
$('#showInfo').on('click', function(e) {
    displayNotification('info', 'This is an info notification', 2000);
    e.preventDefault();
});
$('#showSuccess').on('click', function(e) {
    displayNotification('success', 'This is an success notification', 2000);
    e.preventDefault();
});
$('#showWarning').on('click', function(e) {
    displayNotification('warning', 'This is an warning notification', 2000);
    e.preventDefault();
});
</script> 

4. Add the following styles in your CSS and change it to create your own notification styles.

.notification {
width: 300px;
height: 80px;
position: absolute;
bottom: 0;
right: -300px;
background: #ecf0f1;
margin-bottom: 10px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding: 0 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
line-height: 80px;
border-left: 5px solid
}
.notification-info {
border-left-color: #3498db;
color: #3498db
}
.notification-success {
border-left-color: #2ecc71;
color: #2ecc71
}
.notification-warning {
border-left-color: #e67e22;
color: #e67e22
}
.notification-error {
border-left-color: #e74c3c;
color: #e74c3c
}

---

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