Долгими зимними вечерами делала я интернет-магазин. Задача: при добавлении товара в корзину должно появляться привлекающее внимание оповещение. Внизу экрана по центру. И висеть там, как бы пользователь ни прокручивал страницу, до тех пор, пока он сам, ручками, оповещалку не закроет. Мое решение:
Где-то в html-коде заготовлен контейнер для будущей всплывалки. С абсолютным позиционированием, иначе "кина не будет".
Показываем оповещение, когда товар добавлен в корзину. Например, в callback-функции ajax-запроса, этот товар добавляющего:
var itemTitle = "Какая-то фиговина"; //заглушка на месте реального названия товара var popupText = 'Товар ' + itemTitle + 'добавлен в заказ! <a href="#">Оформить заказ</a> | <a href="javascript:closeBasketPopUp()">Закрыть</a>'; $('#basketPopUp').empty().append(popupText);
//высчитываем координаты CalculatePosition();
//показываем с "прыгающим" эфектом $('#basketPopUp').show("bounce", {}, 500);
//координаты оповещалки будут пересчитываться каждый раз, как пользователь скролит страницу $(window).scroll(function() { CalculatePosition(); });
Расположить див basketPopUp нужно внизу видимой части экрана и горизонтально выровнять по центру. Для этого получаем высоту и ширину клиентской области, зачения вертикального и горизонтального скроллов; вычисляем координаты центра экрана. И уже относительно центра рассчитываем left и top для нашего дива:
function CalculatePosition(){ //центр видимой области экрана var centerX = parseInt($(window).width() / 2) + $(window).scrollLeft(); var centerY = $(window).height() + $(window).scrollTop();
//горизонтально - по-центру var left = centerX - ( $('#basketPopUp').width() / 2) + 'px'; //вертикально - 5 пикселей до нижней границы var top = centerY - $('#basketPopUp').height() - 5 + 'px';
З.Ы. Замечен странный баг: если, не дождавшись пока див отпрыгает свое в рамках bounce эфекта, начать прокручивать страницу, его проглючивает и на пару секунд он улетает вправо. В коде самого эфекта не рылась за неимением времени. Если кто в курсе чё так, подскажите.