<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<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(){
$(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');
});
});