Deerua about Coding -> Javascript: Делаем ненавязчивый алерт (попап хабр-стайл)

Тут всё просто, делаем контейнер в начале боди, с абсолютным позиционированием, или просто вставляем пустой тег, или можем по желанию создать тэг с помощью ДЖс и вставить в начало документа

<div id="messages"></div>

Дальше небольшой стиль, в котором мы сделаем уголки и прозрачности

div#messages {
	position: absolute­;
	top: 0px­;
	right: 0px­;
	width: 250px­;
	margin: 0px­;
	padding: 7px­;
	background: transparent­;
	z-index: 2­;
	position: fixed­;
}
	div#messages div {
		color: #fff­;
		padding: 7px­;
		margin-bottom: 7px­;
		
		-moz-border-radius: 5px­;
		-webkit-border-radius: 5px­;
		-khtml-border-radius: 5px­;
		border-radius: 5px­;
   	
    -moz-opacity: 0.65­;
    -khtml-opacity: 0.65­;
    opacity: 0.65­;
    filter:alpha(opacity=65)­;
		
		background: #888­;
		font: Georgia 12px #fff­;
	}
	div#messages div.error {background: #98001b­;}	
	div#messages div.message {background: #0d8529­;}
	div#messages div.warning {background: #dd6­; color: #333­;}

А теперь JS

$ = function (oid){ return document.getElementById(oid); }
message = function (mtext, mtype, howlong) {
	var mtype = mtype || 'message';
	var howlong = howlong || 5000;
	var alarm = document.createElement ('div');
	alarm.className = mtype;
	alarm.innerHTML = mtext;
	
	alarm.onclick = function () {
		$('messages').removeChild (alarm);
	};
	
	$('messages').appendChild (alarm);
	setTimeout (alarm.onclick, howlong);
}
error = function (mtext, howlong) {
	var howlong = howlong || 10000;
	message(mtext,"error",howlong);
}
warning = function (mtext, howlong) {
	var howlong = howlong || 7000;
	message(mtext,"warning",howlong);
}

Вкратце:

• Создаём дивку
• Вешаем класс по типу
• Дальше вставляем текст
• Вешаем ивент, чтобы алерт исчез по клику
• Вставляем в контейнер
• и убираем по таймауту

• Посмотреть Пример