Using Message boxes is a great way to display warning, error or success messages. Facebook uses a similar message box to display success messages. To Enhance the message box, I, have added different icons for different Message Status. I have also added a fade effect using Jquery. Before getting dirty into the codes, you can either download the file or view an online demo.
View Demo Online || Download Source Code
Step 1 : Add The CSS Styles in your page Header
The CSS Style below Applies for all the Messageboxes.I have the specified the border to be 2 pixels of type solid with some margin and padding to position the text nicely in the message box.
I think the other css properties are pretty straight forward .
<style type='text/css'>
.successbox, .warningbox, .errormsgbox {
font-weight:bold;
border: 2px solid;
margin: 10px 0px;
padding:15px 10px 15px 70px;
background-repeat: no-repeat;
background-position: 10px center;
width:600px;
}
The code below described the properties for each type of message box : Success , Error and Warning .
For each one a font weight,a color ,a background color and an icon is specified as Background Image.
.successbox {
color: #4F8A10;
background-color:#EDFCED;
background-image:url('images/success.png');
}
.warningbox {
color: #FFE222;
background-color:#FAF9C9;
background-image: url('images/warning.png');
}
.errormsgbox {
color: #D8000C;
background-color:#FDD5CE;
background-image: url('images/error.png');
}
</style>
Step 2 : Add div in your body section
In your webpage body section add the following div with each a different CSS Class .
<body> <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 </div> </body>
At this stage,you should have something like this :
Step 3 : Add the fade in effect using Jquery
To add a fade in effect jquery,make sure you have added the jquery library in the header section of your page .
<script language="javascript" src="js/jquery-1.3.2.js" type="text/javascript"></script>
Then Add this javascript code below that will cause a fade in effect with a duration of 2000 millisecond(2 seconds ) when the page loads .By default the 3 divs are hidden and after that it is displayed with a fade in effect .
<script>
$(document).ready(function() {// When the Dom is ready
$('.successbox').hide();//Hide the div
$('.warningbox').hide();
$('.errormsgbox').hide();
$(".successbox").fadeIn(2000); //Add a fade in effect that will last for 2000 millisecond
$(".warningbox").fadeIn(2000);
$(".errormsgbox").fadeIn(2000);
});
</script>
Step 4 : There’s no 4th step :)
If you have any suggestion,please let me know in the comment section .
{ 4 comments… read them below or add one }
Hey Thanks – I’ve just started using jquery and had a bit of code for a message box that would fade out on click, but I wanted it to fade in too. I added your code and it worked like a charm. Many thanks!
nice job…
Thanks buddy….
Hos to add box shadow to stylesheet ?