Message Alert

by edgardleal

HTML

<div class="successbox" > This is a success message Box </div>
<div class="warningbox" > This is a warning message Box </div>
<div class="errormsgbox" > This is a Error  message Box 
<span style="float:right; border-radius : 5px; border : solid 1px" class="ui-icon ui-icon-closethick " id="button"></span>
</div>

CSS

.successbox, .warningbox, .errormsgbox {
	 font-weight:bold;
	 border-top: 2px solid;
     border-bottom: 2px solid;
	 margin: 10px 0px;
	 padding:15px 10px 15px 70px;
	 background-repeat: no-repeat;
	 background-position: 10px center;
	 width:80%;
     margin-left : 5%;
	}

.successbox {
 color: #4F8A10;
 background-color:#EDFCED;
 background-image:url('http://youhack.me/demo/message box/images/success.png');
}
.warningbox {
 color: #FFE222;
 background-color:#FAF9C9;
 background-image: url('http://youhack.me/demo/message box/images/warning.png');
}
.errormsgbox {
 color: #D8000C;
 background-color:#FDD5CE;
 background-image: url('http://youhack.me/demo/message box/images/error.png');
}

JavaScript

setTimeout(function(){
    $('.errormsgbox').fadeOut(1500);
    setTimeout(function(){
      $('.warningbox').fadeOut(1500,
                                function(){
                                $('.successbox').fadeOut(2000);
                                });
    }, 2000);
}, 3000);