Alert Message in Div (Fades in and Fades Out)

Below code snippet helps you populate Alert messages in a Div which has a delay. This message will fade in and fade out after clicking on the button.

Demo on jsfiddle

Successful Alert !!!

Failure Alert !!!

Warning Alert !!!

Script

1. $( "#success-btn" ).click(function() {
2.   $( "div.success" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
3. });
4.  
5. $( "#failure-btn" ).click(function() {
6.   $( "div.failure" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
7. });
8.  
9. $( "#warning-btn" ).click(function() {
10.   $( "div.warning" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
11. });

HTML

1. <p>
2.   <button id="success-btn">Success</button>
3.   <button id="failure-btn">Failure</button>
4.   <button id="warning-btn">Warning</button>
5. </p>
6.  
7. <div class="alert-box success">Successful Alert !!!</div>
8. <div class="alert-box failure">Failure Alert !!!</div>
9. <div class="alert-box warning">Warning Alert !!!</div>

CSS

1. .alert-box {
2.   padding: 15px;
3.   margin-bottom: 20px;
4.   border: 1px solid transparent;
5.   border-radius: 4px;
6. }
7. .success {
8.   color: #3c763d;
9.   background-color: #dff0d8;
10.   border-color: #d6e9c6;
11.   display: none;
12. }
13. .failure {
14.   color: #a94442;
15.   background-color: #f2dede;
16.   border-color: #ebccd1;
17.   display: none;
18. }
19. .warning {
20.   color: #8a6d3b;
21.   background-color: #fcf8e3;
22.   border-color: #faebcc;
23.   display: none;
24. }