[Web-development (jquery)] CSS Jquery Message Box

CSS Jquery Message Box

A css message box that fade out if click the message box

<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(){
// Closing Divs - used on Notification Boxes
 $(".canhide").click(function() {
 $(this).fadeOut(700);
 });
});
</script>

<style>
.notification {
 line-height: 30px;
 cursor: pointer;
 clear: both;
 height: 30px;
 margin: 8px 0px 8px 0px;
 padding: 20px 25px 10px 60px;
 -moz-border-radius:4px;
 -webkit-border-radius: 4px;
}
.notification strong { margin-right: 5px;}
.notification p {
 font-size: 11px;
 padding: 0px;
 margin: 0px;
 color: #333333;
}
.message p {
 font-size: 11px;
}
.warning {
 background-image: url(error000.png);
 background-position: 15px center;
 background-repeat: no-repeat;
 border: 2px solid #FFC237;
 background-color: #FFEAA8;
 color: #826200;
}
.success {
 background-image: url(accept00.png);
 background-position: 15px center;
 background-repeat: no-repeat;
 border: 2px solid #99C600;
 background-color: #EFFFB9;
 color: #3C5A01;
}
.failure {
 background-image: url(exclamat.png);
 background-position: 15px center;
 background-repeat: no-repeat;
 border: 2px solid #EB5339;
 background-color: #FCCAC2;
 color: #AC260F;
}
.information {
 background-image: url(informat.png);
 background-position: 15px center;
 background-repeat: no-repeat;
 border: 2px solid #418ACC;
 background-color: #D0E4F4;
 color: #235685;
}

</style>


WARNING: 
 This is a warning message. 




INFORMATION: 
 This is a message for information




SUCCESS: 
 This is a message for SUCCESS.




FAILURE: 
 This is a failure message.

Download

http://dl.dropbox.com/u/3293191/CSS/message_boxjquery_fadeaway.zip

source : http://docstoc.com, http://tutorial101.blogspot.com, http://instagram.com

Posted by Tutik W