Toastr is a Javascript Library for non-blocking pop-up notifications

Category: jQuery/JavaScript Web Tags: ,
July 16, 2014

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.

One thought on “Toastr is a Javascript Library for non-blocking pop-up notifications

  1. Pingback: Jacksonville SEO company

Comments are closed.