Bootstrap toasts and alerts Premium component
To improve the communication between your website/application and its users, you might want to consider adding some automatic pop-up messages.
With the right use of colors, they add some emotional weight to our information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.
Examples
Info message Warning message Success message Error message
<!--Info message-->
<a class="btn btn-info" onclick="toastr.info('Hi! I am info message.');">Info message</a>
<!--Warning message-->
<a class="btn btn-warning" onclick="toastr.warning('Hi! I am warning message.');">Warning message</a>
<!--Success message-->
<a class="btn btn-success" onclick="toastr.success('Hi! I am success message.');">Success message</a>
<!--Error message-->
<a class="btn btn-danger" onclick="toastr.error('Hi! I am error message.');">Error message</a>
Usage via jQuery:
Click me!
<a class="btn btn-info btn-lg" id="alert-target" >Click me!</a>
$("#alert-target").click(function () {
toastr["info"]("I was launched via jQuery!")
});
Options
Default options:
toastr.options = {
"closeButton": true, // true/false
"debug": false, // true/false
"newestOnTop": false, // true/false
"progressBar": false, // true/false
"positionClass": "toast-top-right", // toast-top-right / toast-top-left / toast-bottom-right / toast-bottom-left
"preventDuplicates": false, true/false
"onclick": null,
"showDuration": "300", // in milliseconds
"hideDuration": "1000", // in milliseconds
"timeOut": "5000", // in milliseconds
"extendedTimeOut": "1000", // in milliseconds
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
Other options:
// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
// Immediately remove current toasts without using animation
toastr.remove()
// Remove current toasts using animation
toastr.clear()
// Override global options
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})