Bootstrap Alerts MDB Pro component
Bootstrap alerts are feedback messages which are displayed after specific actions preceded by the user. Length of the text is not limited.
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.
Additional resources: Have a look at our tutorial about Web Push alerts
Basic examples MDB Pro component
<!--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
<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})