CSS Message Box with jquery

CSS Message Box with jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".pane .btn-delete").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
</script>

<style>
.portlet-content {  padding: 15px; position: relative; }
.message
{
background: #CCC url(images/icon_not.gif) no-repeat 10px 11px;
font-size: 13px;
color: #74655f;
display:block;
padding:10px 10px 10px 40px;
margin-bottom: 1em;
border: 1px solid #c2beb1;
position:relative;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.message-warning
{
background-color: #fffcd3;
background-image: url(images/error000.png);
color: #74655f;
border-color: #c2beb1;
}
.message-success
{
background-color: #e5f993;
background-image: url(images/accept1.png);
color: #688006;
border-color: #9bac55;
}
.message-info
{
background-color: #d4ebfa;
background-image: url(images/informat.png);
color: #4b6bab;
border-color: #90b1c7;
}
.message-error
{
background-color: #f6b9b9;
background-image: url(images/exclamat.png);
color: #c32727;
border-color: #e18484;
}
.close {
float:right;
font-weight:bold;
}

</style>


Informative Message X


Warning Message X


Success Message X

  

Error Message X

Download

http://dl.dropbox.com/u/3293191/JQUERY/CSS_messege_box.zip