jQuery: Growl-like messages

jQuery: Growl-like messages

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

1. <style>
2. .error_box {
3. display: none;
4. border: 1px solid #f7c7c9;
5. background: #f9e5e6;
6. position: fixed;
7. width: 370px;
8. right: 20px;
9. top: 20px;
10. -webkit-box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.3);
11. box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.3);
12. -webkit-border-radius: 5px;
13. border-radius: 5px;
14. text-align: center;
15. }
16.  
17. .error_message {
18. color: #c77c7e;
19. margin-top: 18px;
20. font-weight: bold;
21. text-shadow: 1px 1px 1px #FFFFFF;
22. filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
23. }
24. </style>
25. 
    
26. 
    
27.  
28. <div id="error_box" class="error_box">
29. <p id="error_message" class="error_message"></p>
30. </div>
31.  
32. <script>
33. function throw_message(str) {
34. $('#error_message').html(str);
35. $("#error_box").fadeIn(500).delay(3000).fadeOut(500);
36. }
37. </script>
38.  
39. <a href='#' onclick='throw_message("It Was Clicked"); return false;'>Click it!</a>
40.