Делаем предупреждающие сообщения [notifications box]

Такие сообщения не делал только ленивый и я решил присоединиться к ним

Я сделал два варианта: с использованием jquery и без использования оного. Без использования по функционалу не проигрывает, разве что сообщение появляется и пропадает не плавно, а сразу. В посте я опишу только вариант с jquery.

Первый этап. Разметка.

<div class="notification_box box_error"><!-- меняется в блоках только название: box_error, box_success, box_warning, box_info. Все остальные стили автоматом меняются -->
	<p class="box_title">Ошибка</p>
	<div class="box_text">
		Что-то пошло не так и произошла ошибка. В скором <a href="#">времени</a> мы это починим. Бззззз...
	</div>
</div>
<div class="notification_box box_success">
	<p class="box_title">Все прошло успешно</p>
	<div class="box_text">
		Поздравляем, <a href="#">все прошло</a> успешно...
	</div>
</div>
<div class="notification_box box_warning">
	<p class="box_title">Предупреждение</p>
	<div class="box_text">
		Предупреждение <a href="#">о том</a> или о сем...
	</div>
</div>
<div class="notification_box box_info">
	<p class="box_title">Информация</p>
	<div class="box_text">
		До <a href="#">конца света</a> осталось 9999 дней. Пора запасаться макаронами и солью!
	</div>
</div>

Этап 2. Стили.

.notification_box {
	width:430px;
	border:1px solid;
	padding:10px 10px 10px 60px;
	margin:20px 0;
	position:relative;
	border-radius:6px;
	behavior:url(/pie.htc); /* файл кидать в корень сайта, дает круглые углы */
}
	.notification_close {
		position:absolute;
		top:4px;
		right:4px;
		color:#333;
		font:11px/11px Arial, Verdana, Tahoma, Helvetica;
		text-decoration:underline;
		opacity:.4;
	}
		a:hover.notification_close {
			text-decoration:none;
			opacity:1;
		}
	.box_title {
		font:18px/18px Tahoma, Helvetica, Verdana, Arial;
		padding-bottom:4px;
		margin-top:-3px;
	}
		.box_title a {
			font:18px/18px Tahoma, Helvetica, Verdana, Arial;
			text-decoration:underline;
		}
			.box_title a:hover {
				text-decoration:none;
			}
	.box_text {
		color:#333;
		font:11px/11px Arial, Verdana, Tahoma, Helvetica;
	}
		.box_text p, .box_text div, .box_text span {
			padding:0 !important;
			margin:0 !important;
		}
		.box_text a {
			font:11px/11px Arial, Verdana, Tahoma, Helvetica !important;
			text-decoration:underline !important;
		}
			.box_text a:hover {
				text-decoration:none !important;
			}
.box_error {
	background:#f7dfe2 url(i/box_icons.png) no-repeat 10px 10px;
	border-color:#f3bfc3;
	box-shadow:2px 2px 4px #ddd, inset 0 0 16px #f3bfc3; /* тень справа снизу и тень внутри блока */
	behavior:url(/pie.htc); /* фикс для IE, чтобы была тень */
}
	.box_error .box_title, box_error .box_title a, .box_error .box_text a {
		color:#641f1a;
	}
.box_success {
	background:#d4ffcd url(i/box_icons.png) no-repeat 10px -152px;
	border-color:#b2dcac;
	box-shadow:2px 2px 4px #ddd, inset 0 0 16px #b2dcac;
	behavior:url(/pie.htc);
}
	.box_success .box_title, box_success .box_title a, .box_success .box_text a {
		color:#4f8746;
	}
.box_warning {
	background:#fdfdcb url(i/box_icons.png) no-repeat 10px -310px;
	border-color:#e1e08d;
	box-shadow:2px 2px 4px #ddd, inset 0 0 16px #e1e08d;
	behavior:url(/pie.htc);
}
	.box_warning .box_title, box_warning .box_title a, .box_warning .box_text a {
		color:#9d9c49;
	}
.box_info {
	background:#c0e9fa url(i/box_icons.png) no-repeat 10px -471px;
	border-color:#54acd0;
	box-shadow:2px 2px 4px #ddd, inset 0 0 16px #54acd0;
	behavior:url(/pie.htc);
}
	.box_info .box_title, box_info .box_title a, .box_info .box_text a {
		color:#0e7fba;
	}

Этап 3. Скрипты (не забываем подключить jquery).

<script type="text/javascript">
	$(function() {
		$('.notification_box').prepend('<a href="#" title="Закрыть" class="notification_close"><img src="i/close_box.png" alt="Закрыть" /></a>');
		$('.notification_close').click(function() {
			$(this).parent('div').fadeOut(300);
		});
	});
</script>

Все, готово.

Пример с jquery / Пример без jquery

Скачать архив с демо с использованием jquery

Скачать архив с демо без использования jquery