Hi guys, Today I am going to share some useful css code to improve your alert/confirmation boxes in your website by adding this simple jquery and css code.

Notification Box  using CSS

Notification Box using CSS

Features

  1. Notification Box with Custom Icon
  2. Alert Box
  3. Success Blox
  4. Information Box

View Demo Download Now

I have already designed cool notification boxes using jquery & css in my previous article – http://w3lessons.info/2012/01/07/cool-notification-alert-message-boxes-using-css/

http://w3lessons.info/2012/02/22/notification-message-boxes-with-css-jquery/

http://w3lessons.info/2012/05/24/stylish-message-boxes-using-css-and-jquery/

CSS Code

div.alert-message {
display: block;
padding: 13px 12px 12px;
font-weight: bold;
font-size: 14px;
color: white;
background-color: #2ba6cb;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
position: relative;
}
div.alert-message .box-icon {
display: block;
float: left;
background-image: url('icon.png');
width: 30px;
height: 25px;
margin-top: -2px;
background-position: -8px -8px;
}
div.alert-message p {
margin: 0px;
}
div.alert-message.success {
background-color: #5da423;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.success .box-icon {
background-position: -48px -8px;
}
div.alert-message.warning {
background-color: #e3b000;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.warning .box-icon {
background-position: -88px -8px;
}
div.alert-message.error {
background-color: #c60f13;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.error .box-icon {
background-position: -128px -8px;
}
div.alert-message a.close {
color: #333;
position: absolute;
right: 4px;
top: -1px;
font-size: 17px;
opacity: 0.2;
padding: 4px;
}
div.alert-message a.close:hover, div.alert-box a.close:focus {
opacity: 0.4;
}

Jquery Code for Close Button

$(function(){
 $(".alert-message").delegate("a.close", "click", function(event) {
	  event.preventDefault();
	  $(this).closest(".alert-message").fadeOut(function(event){
		  $(this).remove();
	  });
  });
})

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo Download Now

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/01/Notification-Box-using-CSS.pnghttp://w3lessons.info/wp-content/uploads/2013/01/Notification-Box-using-CSS-150x150.pngKarthikeyan KCSS3FreebiesWeb DesignCascading Style Sheets,message box
Hi guys, Today I am going to share some useful css code to improve your alert/confirmation boxes in your website by adding this simple jquery and css code.FeaturesNotification Box with Custom Icon Alert Box Success Blox Information BoxView Demo Download NowI have already designed cool notification boxes using jquery & css in...