<html>
<head>
//add this:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body>
<a id='linkButton'>ClickMe</a>
//add this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
//add this:
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
toastr.options.timeOut = 1500; // 1.5s
toastr.info('Page Loaded!');
$('#linkButton').click(function() {
toastr.success('Click Button');
});
});
</script>
</body>
</html>
Run code snippet
toastr.warning('something wrong');
toastr.success('successful');
toastr.options = {
"debug": false,
"positionClass": "toast-bottom-full-width",
"onclick": null,
"fadeIn": 300,
"fadeOut": 1000,
"timeOut": 5000,
"extendedTimeOut": 1000
}
toastr.error('error');
$.toast({
heading: 'Information',
text: 'Now you can add icons to the toasts as well.',
icon: 'info'
})
toastr.info('toastr message info');