Toastr Notifications

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Button trigger modal -->

<link rel="stylesheet" href="https://raw.github.com/daneden/animate.css/master/animate.css">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css">

<button class="btn btn-primary btn-lg" id="show">

  Show Toast

</button>

<button class="btn btn-primary btn-lg" id="clear_and_show">

  Clear and Show Toast

</button>

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>

$(document).ready(function(){

  $('#show').on('click',function(){

    toastr.options = {

            "closeButton": true,

            "debug": false,

            "positionClass": "toast-bottom-full-width",

            "onclick": null,

            "showDuration": "1000",

            "hideDuration": "0",

            "timeOut": "0",

            "extendedTimeOut": "1000",

            "showEasing": "swing",

            "hideEasing": "linear",

            "showMethod": "fadeIn",

            "hideMethod": "fadeOut"

        };

        toastr.error('The message goes here', 'Title');

  });

  $('#clear_and_show').on('click',function(){

    toastr.clear();

    toastr.options = {

            "closeButton": true,

            "debug": false,

            "positionClass": "toast-bottom-full-width",

            "onclick": null,

            "showDuration": "1000",

            "hideDuration": "0",

            "timeOut": "0",

            "extendedTimeOut": "1000",

            "showEasing": "swing",

            "hideEasing": "linear",

            "showMethod": "fadeIn",

            "hideMethod": "fadeOut"

        };

        toastr.error('The message goes here', 'Title');

  });

});