Bootstrap Notify
This plugin helps to turn standard bootstrap toasts into "growl" like notifications.
Bootstrap Notify formally known as Bootstrap notify was renamed at version 3.0.0. This project originally started out to be a pull request for ifightcrime's Bootstrap notify plugin, but quickly grew into it's own. This is the reason the two plugins shared a name and I chose that it was time that my plugin got its own name.
Demo
Documentation
Please make sure to read the documentation it explains how to use this plugin and points out common mistakes people tend to make. It will also give you examples on how to use this plugin.
Please feel free to make improvements by forking the plugin and making a pull request. Lastly, if you do find an issue with the plugin please report it on the github issues page.
Below is an example showing all the correct way to use Bootstrap Notify.
new Notify({
// options
message: 'Hello World'
},{
// settings
type: 'danger'
});
Full list of options/settings
Below is a list of all the options and settings you are able to use and which each section belongs to.
new Notify({
// options
icon: 'glyphicon glyphicon-warning-sign',
title: 'Bootstrap notify',
message: 'Turning standard Bootstrap alerts into "notify" like notifications',
},{
// settings
element: 'body',
position: null,
type: "info",
allow_dismiss: true,
newest_on_top: false,
showProgressbar: false,
placement: {
from: "top",
align: "right"
},
delay: 5000,
timer: 1000,
mouse_over: null,
animate: {
enter: 'animated fadeInDown',
exit: 'animated fadeOutUp'
},
onShow: null,
onShown: null,
onClose: null,
onClosed: null,
icon_type: 'class'
});
Options
| Name |
Type / Values |
Required |
Description |
| icon |
class | src |
No |
This is the icon that will be displayed within the notify notification. This icon can either be a class (Font Icon) or an image url. Please keep in mind if you wish to use an image url that you must set icon_type to img in the options. |
| title |
string |
No |
This is the title that will be displayed within the notify notification. Please keep in mind unless you style the [data-notify="title"] in css this will look identical to the message. |
| message |
string |
Yes |
This is the message that will be displayed within the notify notification. |
Settings
| Name |
Type / Values |
Default |
Description |
| element |
string |
body |
Appends the notification to a specific element. If the element is set to anything other than the body of a document it switches from a position: fixed to position: absolute. |
| type |
string |
info |
Defines the style for the icon & progress bar color. |
| allow_dismiss |
boolean |
true |
If this value is set to false it will hide the data-grow="dismiss" element. Please keep in mind if you modify the template setting and do not include a data-notify="dismiss" element even with this set to true there will be no element for a user to click to close the notification. |
| showProgressbar |
boolean |
false |
This boolean is used to determine if the notification should display a progress bar. |
| placement.from |
string |
top |
This controls where if the notification will be placed at the top or bottom of your element. |
| placement.align |
string |
right |
This controls if the notification will be placed in the left, center or right side of the element. |
| delay |
integer |
5000 |
If delay is set higher than 0 then the notification will auto-close after the delay period is up. Please keep in mind that delay uses milliseconds so 5000 is 5 seconds. |
| timer |
integer |
1000 |
This is the amount of milliseconds removed from the notify at every timer milliseconds. So to make that a little less confusing every 1000 milliseconds there will be 1000 milliseconds removed from the remaining time of the notify delay. If this is set higher then delay the notify will not be removed until timer has run out. |
| mouse_over |
pause | null |
null |
By default this does nothing. If you set this option to pause it will pause the timer on the notification delay. Since version 2.0.0 the timer will not reset it will continue from it's last tick. |
| animate.enter |
string |
animated fadeInDown |
This will control the animation used to bring the generate the notification on screen. Since version 2.0.0 all animations are controlled using css. This plugin is not com packaged with any animations. Please use Animate.css by Daniel Eden or you can always write your own css animations. |
| animate.exit |
string |
animated fadeOutUp |
This will control the animation used to bring the generate the notification on screen. Since version 2.0.0 all animations are controlled using css. This plugin is not com packaged with any animations. Please use Animate.css by Daniel Eden or you can always write your own css animations. |
| onShow |
function |
null |
This event fires immediately when the show instance method is called. |
| onShow |
function |
null |
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). |
| onClose |
function |
null |
This event is fired immediately when the notification is closing. |
| onClosed |
function |
null |
his event is fired when the modal has finished closing and is removed from the document (will wait for CSS transitions to complete). |
| icon_type |
string |
class |
This is used to let the plugin know if you are using an icon font for images or if you are using image. If this setting is not set to class it will assume you are using an img. Please keep in mind if you are using an image you to set icon to the src of the image. |
| template |
HTML |
code below |
Since version 3.0.0 the template option has been revamped in hopes of giving users more control over the layout. Please find the code for the default template below. |
Default Template Setup
Bootstrap Notify uses data attributes (data-notify) to place content with in the notification template.
container: Container of notification elementdismiss: Element used to allow user to manually close notificationicon: Either has a class for an icon image or will generate an html image tagtitle: Element that the notification will insert the titlemessage: Element that the notification will insert the messageprogressbar: Element used to show progress bar.
In version 3+ the template setting was modified to use a combination of data attributes and a C# string.format like function to control the content within the notification.
{0} = type{1} = title{2} = message
<div data-notify="container" class="toast fade m-3" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span data-notify="icon" class="me-2 text-{0}"></span>
<strong class="me-auto fw-bold" data-notify="title">{1}</strong>
<button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" data-notify="dismiss" aria-label="Close">
</button>
</div>
<div class="toast-body" data-notify="message">
{2}
<div class="progress" role="progressbar" data-notify="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-{0}" style="width: 0%;"></div>
</div>
</div>
Methods
To use a method you have to assign the notification to a variable when it is created. The example below will show you how to create a notification then update the type and message then close it.
Update
var notify = new Notify('...');
notify.update('title', '...');
notify.update('message', '...');
notify.update('icon', '...');
notify.update('type', '...');
notify.update('progress', '...');
Close
var notify = new Notify('...');
notify.close();
Example of how to use the methods
var notify = new Notify('<strong>Saving</strong> Do not close this page...', {
allow_dismiss: false,
showProgressbar: true
});
setTimeout(function() {
notify.update({'type': 'success', 'message': '<strong>Success</strong> Your page has been saved!', 'progress': 25});
}, 4500);
var notify = new Notify('<strong>Saving</strong> Do not close this page...', {
type: 'success',
allow_dismiss: false,
showProgressbar: true
});
setTimeout(function() {
notify.update('message', '<strong>Saving</strong> Page Data.');
}, 1000);
setTimeout(function() {
notify.update('message', '<strong>Saving</strong> User Data.');
}, 2000);
setTimeout(function() {
notify.update('message', '<strong>Saving</strong> Profile Data.');
}, 3000);
setTimeout(function() {
notify.update('message', '<strong>Checking</strong> for errors.');
}, 4000);
Examples
Basic Bootstrap Notify
new Notify("Hello World");
Passing in a title
new Notify({
title: "Welcome:",
message: "This plugin has been provided to you by Robert McIntosh aka mouse0270"
});
Passing HTML
new Notify({
title: "<strong>Welcome:</strong> ",
message: "This plugin has been provided to you by Robert McIntosh aka mouse0270"
});
new Notify({
title: "<strong>Welcome:</strong> ",
message: "This plugin has been provided to you by Robert McIntosh aka <a href=\"https://twitter.com/Mouse0270\" target=\"_blank\">@mouse0270</a>"
});
Using a Font Icon
new Notify({
icon: 'glyphicon glyphicon-star',
message: "Everyone loves font icons! Use them in your notification!"
});
new Notify({
icon: 'fa fa-paw',
message: "You're not limited to just Bootstrap Font Icons"
});
Using Images Instead of Font Icons
new Notify({
icon: "Content/bs.png",
message: " I am using an image."
},{
icon_type: 'image'
});
Using Bootstrap Alert Types
new Notify({
title: '<strong>Heads up!</strong>',
message: 'Bootstrap Notify uses Bootstrap Info Alert styling as its default setting.'
});
new Notify({
title: '<strong>Heads up!</strong>',
message: 'You can use any of bootstraps other alert styles as well by default.'
},{
type: 'success'
});
new Notify({
title: '<strong>Heads up!</strong>',
message: 'You can use any of bootstraps other alert styles as well by default.'
},{
type: 'warning'
});
new Notify({
title: '<strong>Heads up!</strong>',
message: 'You can use any of bootstraps other alert styles as well by default.'
},{
type: 'danger'
});
Animating Bootstrap Notify
One of the most powerful features in Bootstrap Notify is that you can easily animate how it enters and exits the screen using CSS (Please note that you can no longer animate the notifications using jquery).
new Notify("Enter: Fade In and Down
Exit: Fade Out and Up");
new Notify("Enter: Fade In and Right
Exit: Fade Out and Right", {
animate: {
enter: 'animated fadeInRight',
exit: 'animated fadeOutRight'
}
});
new Notify("Enter: Bounce In from Top
Exit: Bounce Up and Out", {
animate: {
enter: 'animated animate__bounceInDown',
exit: 'animated animate__bounceOutUp'
}
});
new Notify("Enter: Bounce In
Exit: Bounce Out", {
animate: {
enter: 'animated animate__bounceIn',
exit: 'animated animate__bounceOut'
}
});
new Notify("Enter: Flip In on Y Axis
Exit: Flip Out on X Axis", {
animate: {
enter: 'animated animate__flipInY',
exit: 'animated animate__flipOutX'
}
});
new Notify("Enter: Light Speed In
Exit: Light Speed Out", {
animate: {
enter: 'animated animate__lightSpeedInRight',
exit: 'animated animate__lightSpeedOutRight'
}
});
new Notify("Enter: Roll In
Exit: Roll Out", {
animate: {
enter: 'animated animate__rollIn',
exit: 'animated animate__rollOut'
}
});
new Notify("Enter: Zoom Down and In
Exit: Zoom Up and Out", {
animate: {
enter: 'animated animate__zoomInDown',
exit: 'animated animate__zoomOutUp'
}
});
Newest Notifications On Top
As of Bootstrap Notify 3+ there is a new option that will allow you to have newer notifications push down older ones. If you click on the example below you will notice that each new notification is added after the last notification in the list. However in the second example you will see that it pushes the older notifications down leaving the newest on above the others.
new Notify("Hello World: I was added to the bottom.");
new Notify("Hello World: I was added to the top.", {
newest_on_top: true
});
Warning! be careful when setting newest_on_top to true when a placement that already contains a notification has newest_on_top to false. It may cause issues with the plugins ability to place the notification in the correct location.
Customized Notifications
Below is a list custom styled notifications that you may use as a whole or a starting off point. I'll will occasionally update this list so please check back for more styles.
.alert-minimalist {
background-color: rgb(241, 242, 240);
border-color: rgba(149, 149, 149, 0.3);
border-radius: 3px;
color: rgb(149, 149, 149);
padding: 10px;
}
.alert-minimalist > [data-notify="icon"] {
height: 50px;
margin-right: 12px;
}
.alert-minimalist > [data-notify="title"] {
color: rgb(51, 51, 51);
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.alert-minimalist > [data-notify="message"] {
font-size: 80%;
}
new Notify({
icon: 'https://randomuser.me/api/portraits/med/men/77.jpg',
title: 'Byron Morgan',
message: 'Momentum reduce child mortality effectiveness incubation empowerment connect.'
},{
type: 'minimalist',
delay: 5000,
icon_type: 'image',
template: '<div data-notify="container" class="m-3 alert alert-{0}" role="alert">' +
'<img data-notify="icon" class="img-circle pull-left">' +
'<span data-notify="title">{1}</span>' +
'<span data-notify="message">{2}</span>' +
'</div>'
});
@import url(http://fonts.googleapis.com/css?family=Old+Standard+TT:400,700);
[data-notify="container"class*="alert-pastel-"] {
background-color: rgb(255, 255, 238);
border-width: 0px;
border-left: 15px solid rgb(255, 240, 106);
border-radius: 0px;
box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.3);
font-family: 'Old Standard TT', serif;
letter-spacing: 1px;
}
[data-notify="container"].alert-pastel-info {
border-left-color: rgb(255, 179, 40);
}
[data-notify="container"].alert-pastel-danger {
border-left-color: rgb(255, 103, 76);
}
[data-notify="container"class*="alert-pastel-"] > [data-notify="title"] {
color: rgb(80, 80, 57);
display: block;
font-weight: 700;
margin-bottom: 5px;
}
[data-notify="container"class*="alert-pastel-"] > [data-notify="message"] {
font-weight: 400;
}
new Notify({
title: 'Email: Erica Fisher',
message: 'Investment, stakeholders micro-finance equity health Bloomberg; global citizens climate change. Solve positive social change sanitation, opportunity insurmountable challenges...'
},{
type: 'pastel-warning',
delay: 5000,
template: '<div data-notify="container" class="m-3 alert alert-{0}" role="alert">' +
'<span data-notify="title">{1}</span>' +
'<span data-notify="message">{2}</span>' +
'</div>'
});
new Notify({
title: 'Application Installing',
message: 'Developing nations social innovation shift globalization, invest safeguards life-expectancy positive social change. Gender care, new approaches empowerment diversity.'
},{
type: 'pastel-info',
delay: 5000,
template: '<div data-notify="container" class="m-3 alert alert-{0}" role="alert">' +
'<span data-notify="title">{1}</span>' +
'<span data-notify="message">{2}</span>' +
'</div>'
});
new Notify({
title: 'EVERYTHING IS CRASHING!',
message: 'Working families Global South working alongside NGO research breakthrough insights public-private partnerships. Tackle contribution, equal opportunity, design thinking.'
},{
type: 'pastel-danger',
delay: 5000,
template: '<div data-notify="container" class="m-3 alert alert-{0}" role="alert">' +
'<span data-notify="title">{1}</span>' +
'<span data-notify="message">{2}</span>' +
'</div>'
});