Сообщения, message box, alert на jquery

Сегодня мы рассмотрим как сделать на jquery message box, т.е. блок с небольшим сообщением для пользователя когда он сделал какие-либо дейсвия на сайте. Такой блок пригодится, например, когда посетитель интернет-магазина добавляет себе в корзину товар и ему выскакивает сообщение — товар добавлен. Также, этот блок можно использовать в качестве замены стандартной функции JavaScript alert.

Итак, начнем.

Для начала добавим в структуру сайта html код блока в котором мы и будем показывать какое-либо сообщение. Это можно сделать непосредственно в шаблоне сайта, но мы добавим его «на лету», с помощью jquery.

/*
	Функция для добавления блока на сайт
*/
function addMessageBox(){
	$('<div></div>')
	/* присваиваем блоку уникальный ID */
	.attr('id','MessageBox')
	/* определяем внешний вид (в рабочем варианте это лучше сделать во внешнем css файле) */
	.css('border':'1px solid #ccc','padding':'5px 10px','background':'#fff'})
	/* не показываем пока нет надобности */
	.hide()
	/* добавляем на сайт */
	.appendTo('body');
}

/*
	Функция для показа сообщения
*/
function showMessageBox(test){
	//если блок не был еще создан — создаем его
	if($('#MessageBox').length==0){
		addMessageBox();
	}

	//выводим сообщение и показываем блок
	$('#MessageBox').text(text).show();
}

Демонстрация:

Вот — основная задача выполнена. Теперь сделаем так, чтобы блок с сообщением показывался в центре экрана и затем сам пропадал через определенное время. Для этого добавим Функцию, которая будет определять координаты центра экрана и позиционировать там блок. При этом будем учитывать величину прокрутки страницы.

/*
	Функция для позиционирования блока по центру экрана с учетом прокрутки
*/
function setCenter(){
	var top=(window.innerHeight-$('#MessageBox').height())/2+$(window).scrollTop();
	var left=(window.innerWidth-$('#MessageBox').width())/2+$(document).scrollLeft();
	$('#MessageBox').css('position','absolute')
		.css({'top':top+'px','left':left+'px'});
}
function showMessageBox(text,o){
	if($('#MessageBox').length==0){
		addMessageBox();
	}

	$('#MessageBox').text(text).show();


	/* позиционируем блок по центру */
	setCenter();

	/* назначаем обработчик для события scroll */
	$(window).bind('scroll',setCenter);
	/* автоматически убираем блок через 1 секунду */
	window.setTimeout(function(){
		$('#MessageBox').fadeOut('slow');
		$(window).unbind('scroll',setCenter);
	},1000);
}

Демонстрация: