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-->
<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})