6 ноября 2009-го

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

6 ноября 2009, 7:45

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);
}