Toastr is a Javascript Library for non-blocking pop-up notifications
Toastr is a simple javascript library to show pop-up messages which dissolve themselves after a few seconds. These are technically known as non-blocking notifications and you have probably seen a similar notification when new email arrives on your PC. Toastr is easy to use and very effective.
My demo is here and the code for that is shown below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="css/toastr.min.css" rel="stylesheet" type="text/css" />
<script src="js/toastr.min.js"></script>
<!-- Just to tidy the demo -->
<style>
body{padding:10px;font-family: Verdana,Helvetica,sans-serif;font-size:12px; }
</style>
<title>Toastr Test</title>
</head>
<body>
<h3>Toastr Demo</h3>
<p>You can click the buttons quickly and see how messages stack</p>
<p><button type="button" id="btn1">Single Info Message</button></p>
<p><button type="button" id="btn2">Error Message with header</button></p>
<p><button type="button" id="btn3">Success Message with Close button</button></p>
<p>Let the stack clear and then try this positional option:</p>
<p><button type="button" id="btn4">Message at bottom-right;</button></p>
<script>
$(document).ready(function() {
$("#btn1").click(function(){
toastr.info("This message will self destruct in 5 seconds...");
});
$("#btn2").click(function(){
toastr.error("There was no error really, it works fine", "DEMO TITLE");
});
$("#btn3").click(function(){
toastr.options.closeButton = true;
toastr.success("If you cannot wait press the close", "Button Demo");
});
$("#btn4").click(function(){
toastr.options.positionClass = "toast-bottom-right";
toastr.info("I'm down here on the right..");
});
});
</script>
</body>
</html>
Toastr was written by Hans Fjällemark & John Papa and for more details and code download visit https://github.com/CodeSeven/toastr.
1 thought on “Toastr is a Javascript Library for non-blocking pop-up notifications”
Comments are closed.