article

Monday, May 17, 2010

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

Related Post