Windows Metro Style Message Box using CSS3 & jQuery

Example

Check out the live example and how to use it in your site

Success – Your message will goes here

Toggle

Error – Message will goes here

Toggle

Info – Information message will goes here

Toggle

Notice – Notification message will goes here

Toggle

Download – Download message will goes here

Toggle

jQuery(document).ready(function() {
	$(".alert .toggle-alert").click(function(){
  		$(this).closest(".alert").slideUp();
  		return false;
	});
});

<div class="success-box alert">
<div class="msg">Success &#8211; Your message will goes here</div>
<p><a class="toggle-alert" href="#">Toggle</a></p>
</div>


<div class="error-box alert">
<div class="msg">Error &#8211; Message will goes here</div>
<p><a class="toggle-alert" href="#">Toggle</a></p>
</div>


<div class="info-box alert">
<div class="msg">Info &#8211; Information message will goes here</div>
<p><a class="toggle-alert" href="#">Toggle</a></p>
</div>


<div class="notice-box alert">
<div class="msg">Notice &#8211; Notification message will goes here</div>
<p><a class="toggle-alert" href="#">Toggle</a></p>
</div>


<div class="download-box alert">
<div class="msg">Download &#8211; Download message will goes here</div>
<p><a class="toggle-alert" href="#">Toggle</a></p>
</div>

.alert {
	padding: 19px 15px;
	color: #fefefe;
	position: relative;
	font: 14px/20px Museo300Regular, Helvetica, Arial, sans-serif;
}
.alert .msg { padding: 0 20px 0 40px;}
.alert p { margin: 0;}
.alert .toggle-alert {
	position: absolute;
	top: 7px;
	right: 10px;
	display: block;
	text-indent: -10000px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	-webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.1);
	-moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.1);
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.08) url(images/alert.png) no-repeat 6px 6px;
}
.info-box {		background: #2fa9f6 url(images/info.png) no-repeat 14px 14px;}
.success-box {	background: #7EB62E url(images/success.png) no-repeat 14px 14px;}
.error-box {	background: #f64b2f url(images/error.png) no-repeat 14px 14px;}
.notice-box {	background: #f6ca2f url(images/notice.png) no-repeat 14px 14px;}
.download-box {	background: #a555ca url(images/download.png) no-repeat 14px 14px;}