Notification
This plugin helps to turn standard bootstrap alerts into "growl" like notifications. check documentation.
Contextual Notification
It uses the structure of default alerts in notification popup.
<button id="primary_notification" class="btn btn-primary">Primary Message</button>
<button id="warning_notification" class="btn btn-warning">Warning Message</button>
<button id="danger_notification" class="btn btn-danger">Danger Message</button>
<button id="info_notification" class="btn btn-info">Info Message</button>
<button id="success_notification" class="btn btn-success">Success Message</button>
<!-- Bootstrap Notify JS -->
<script src="dist/js/bootstrap-notify.min.js"></script>
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
delay:50000000
});
$('#primary_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "primary",
allow_dismiss:false
});
});
$('#warning_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "warning",
allow_dismiss:false
});
});
$('#info_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "info",
allow_dismiss:false
});
});
$('#success_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "success",
allow_dismiss:false
});
});
$('#danger_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "danger",
allow_dismiss:false
});
});
Dismisable Notification
In dismisable notification user can dissmis the alert notifications.
<button id="d_primary_notification" class="btn btn-primary">Primary Message</button>
<button id="d_warning_notification" class="btn btn-warning">Warning Message</button>
<button id="d_danger_notification" class="btn btn-danger">Danger Message</button>
<button id="d_info_notification" class="btn btn-info">Info Message</button>
<button id="d_success_notification" class="btn btn-success">Success Message</button>
$('#d_primary_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
});
});
$('#d_warning_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-warning",
});
});
$('#d_info_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-info",
});
});
$('#d_success_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-success",
});
});
$('#d_danger_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-danger",
});
});
Inverse Notification
It uses the structure of inverse alerts in notification popup.
<button id="primary_notification_inverse" class="btn btn-primary">Primary Message</button>
<button id="warning_notification_inverse" class="btn btn-warning">Warning Message</button>
<button id="danger_notification_inverse" class="btn btn-danger">Danger Message</button>
<button id="info_notification_inverse" class="btn btn-info">Info Message</button>
<button id="success_notification_inverse" class="btn btn-success">Success Message</button>
$('#primary_notification_inverse').on('click', function(event) {
event.preventDefault();
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "inv alert-inv-primary",
allow_dismiss:false,
delay:50000000
});
});
$('#warning_notification_inverse').on('click', function(event) {
event.preventDefault();
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "inv alert-inv-warning",
allow_dismiss:false
});
});
$('#info_notification_inverse').on('click', function(event) {
event.preventDefault();
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "inv alert-inv-info",
allow_dismiss:false
});
});
$('#success_notification_inverse').on('click', function(event) {
event.preventDefault();
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "inv alert-inv-success",
allow_dismiss:false
});
});
$('#danger_notification_inverse').on('click', function(event) {
event.preventDefault();
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "inv alert-inv-danger",
allow_dismiss:false
});
});
Position
You can change the position of notification according to your requiremnt.
<button id="top_right_pos" class="btn btn-primary">Top Right</button>
<button id="bottom_right_pos" class="btn btn-warning">Bottom Right</button>
<button id="top_left_pos" class="btn btn-danger">Top Left</button>
<button id="top_center_pos" class="btn btn-info">Top Center</button>
<button id="bottom_left_pos" class="btn btn-success">bottom Left</button>
<button id="bottom_center_pos" class="btn btn-pink">bottom Center</button>
$('#top_right_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "right"
},
});
});
$('#bottom_right_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "right"
},
});
});
$('#top_left_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "left"
},
});
});
$('#bottom_left_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "left"
},
});
});
$('#bottom_center_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInUp',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "center"
},
});
});
$('#top_center_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "center"
},
});
});
Animation
You can add animate.css animations.
<div class="row">
<div class="col-sm-4">
<select class="form-control custom-select" id="hk_notify_animate_enter">
<optgroup label="Attention Seekers">
<option value="bounce">bounce</option>
<option value="flash">flash</option>
<option value="pulse">pulse</option>
<option value="rubberBand">rubberBand</option>
<option value="flip">flip</option>
<option value="shake">shake</option>
<option value="swing">swing</option>
<option value="tada">tada</option>
<option value="wobble">wobble</option>
<option value="jello">jello</option>
</optgroup>
<optgroup label="Bouncing Entrances">
<option value="bounceIn">bounceIn</option>
<option value="bounceInDown">bounceInDown</option>
<option value="bounceInLeft">bounceInLeft</option>
<option value="bounceInRight">bounceInRight</option>
<option value="bounceInUp">bounceInUp</option>
</optgroup>
<optgroup label="Fading Entrances">
<option value="fadeIn">fadeIn</option>
<option value="fadeInDown">fadeInDown</option>
<option value="fadeInDownBig">fadeInDownBig</option>
<option value="fadeInLeft">fadeInLeft</option>
<option value="fadeInLeftBig">fadeInLeftBig</option>
<option value="fadeInRight">fadeInRight</option>
<option value="fadeInRightBig">fadeInRightBig</option>
<option value="fadeInUp">fadeInUp</option>
<option value="fadeInUpBig">fadeInUpBig</option>
</optgroup>
<optgroup label="Flippers">
<option value="flipInX">flipInX</option>
<option value="flipInY">flipInY</option>
</optgroup>
<optgroup label="Lightspeed">
<option value="lightSpeedIn">lightSpeedIn</option>
</optgroup>
<optgroup label="Rotating Entrances">
<option value="rotateIn">rotateIn</option>
<option value="rotateInDownLeft">rotateInDownLeft</option>
<option value="rotateInDownRight">rotateInDownRight</option>
<option value="rotateInUpLeft">rotateInUpLeft</option>
<option value="rotateInUpRight">rotateInUpRight</option>
</optgroup>
<optgroup label="Sliding Entrances">
<option value="slideInUp">slideInUp</option>
<option value="slideInDown">slideInDown</option>
<option value="slideInLeft">slideInLeft</option>
<option value="slideInRight">slideInRight</option>
</optgroup>
<optgroup label="Zoom Entrances">
<option value="zoomIn">zoomIn</option>
<option value="zoomInDown">zoomInDown</option>
<option value="zoomInLeft">zoomInLeft</option>
<option value="zoomInRight">zoomInRight</option>
<option value="zoomInUp">zoomInUp</option>
</optgroup>
<optgroup label="Specials">
<option value="rollIn">rollIn</option>
</optgroup>
</select>
</div>
<div class="col-sm-4">
<select class="form-control custom-select" id="hk_notify_animate_exit">
<optgroup label="Bouncing Exits">
<option value="bounceOut">bounceOut</option>
<option value="bounceOutDown">bounceOutDown</option>
<option value="bounceOutLeft">bounceOutLeft</option>
<option value="bounceOutRight">bounceOutRight</option>
<option value="bounceOutUp">bounceOutUp</option>
</optgroup>
<optgroup label="Fading Exits">
<option value="fadeOut">fadeOut</option>
<option value="fadeOutDown">fadeOutDown</option>
<option value="fadeOutDownBig">fadeOutDownBig</option>
<option value="fadeOutLeft">fadeOutLeft</option>
<option value="fadeOutLeftBig">fadeOutLeftBig</option>
<option value="fadeOutRight">fadeOutRight</option>
<option value="fadeOutRightBig">fadeOutRightBig</option>
<option value="fadeOutUp">fadeOutUp</option>
<option value="fadeOutUpBig">fadeOutUpBig</option>
</optgroup>
<optgroup label="Flippers">
<option value="flipOutX">flipOutX</option>
<option value="flipOutY">flipOutY</option>
</optgroup>
<optgroup label="Lightspeed">
<option value="lightSpeedOut">lightSpeedOut</option>
</optgroup>
<optgroup label="Rotating Exits">
<option value="rotateOut">rotateOut</option>
<option value="rotateOutDownLeft">rotateOutDownLeft</option>
<option value="rotateOutDownRight">rotateOutDownRight</option>
<option value="rotateOutUpLeft">rotateOutUpLeft</option>
<option value="rotateOutUpRight">rotateOutUpRight</option>
</optgroup>
<optgroup label="Sliding Exits">
<option value="slideOutUp">slideOutUp</option>
<option value="slideOutDown">slideOutDown</option>
<option value="slideOutLeft">slideOutLeft</option>
<option value="slideOutRight">slideOutRight</option>
</optgroup>
<optgroup label="Zoom Exits">
<option value="zoomOut">zoomOut</option>
<option value="zoomOutDown">zoomOutDown</option>
<option value="zoomOutLeft">zoomOutLeft</option>
<option value="zoomOutRight">zoomOutRight</option>
<option value="zoomOutUp">zoomOutUp</option>
</optgroup>
<optgroup label="Specials">
<option value="hinge">hinge</option>
<option value="rollOut">rollOut</option>
</optgroup>
</select>
</div>
<div class="col-sm-4">
<button id="check_anim_notify" class="btn btn-info">Check Animation</button>
</div>
</div>
$('#check_anim_notify').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: "animated " + $("#hk_notify_animate_enter").val(),
exit: "animated " + $("#hk_notify_animate_exit").val()
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "left"
},
});
});
Custom URL
You can provide custom URLs inside notifications.
<button id="url_notify" class="btn btn-primary">Custom URL</button>
$('#url_notify').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify({
message: "Check out my twitter account by clicking on this notification!",
url: "https://twitter.com/hencework",
target: "_self"
},{
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
delay:50000000
});
});
Icon
Icon can improves the notifications.
<button id="icon_notify" class="btn btn-primary">Icon</button>
$('#icon_notify').on('click', function(event) {
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
event.preventDefault();
$.notify({
icon: 'ri-award-line mr-5',
message: "You're not limited to just Bootstrap Font Icons",
placement: {
from: "top",
align: "left"
},
},{ type: "dismissible alert-primary",delay:50000000});
});
With Title
You can add titles inside notifications.
<button id="title_notify" class="btn btn-primary">Demo</button>
$('#title_notify').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify({
title: 'Heads up!',
message: "You're not limited to just Bootstrap Font Icons",
},{
type: "dismissible alert-primary",
});
});
Update Notify
Custom progress bar anmations for updates.
<button id="update_notify" class="btn btn-primary">Demo</button>
$('#update_notify').on('click', function(event) {
var notify = $.notify('Saving Do not close this page...', {
type: 'success',
allow_dismiss: false,
showProgressbar: true,
});
setTimeout(function() {
notify.update('message', 'Saving Page Data.');
}, 1000);
setTimeout(function() {
notify.update('message', 'Saving User Data.');
}, 2000);
setTimeout(function() {
notify.update('message', 'Saving Profile Data.');
}, 3000);
setTimeout(function() {
notify.update('message', 'Checking for errors.');
}, 4000);
});