Сообщения, 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); }
Демонстрация: