Всплывающий блок на JQuery в конце страницы

Может быть Вы видели когда-то всплывающий блок, который выдвигается, когда вы дочитываете последнюю часть статьи. В этом блоке обычно показана еще одна статья из той же категории, и я думаю, что это может быть очень интересно для любого блога или веб-сайта, имеющего статьи.

В этом всплывающем блоке можно поместить любой контент, который Вы хотите, чтобы пользователь увидел после прочтения статьи. Что-то подобное уже было в уроке, как создать всплывающую панель навигации для сайта. Идея состоит в том, что последний абзац будет иметь специальный id, который и будет вызывать этот всплывающий блок с контентом.

Думаю суть ясна, давайте начнем!

HTML код для блока

Во-первых, нам нужно где-то в абзаце, в конце добавить id="last", дойдя до которого пользователь увидит всплывающее окно:

А вот и структура самого блока, в который Вы можете заключить что угодно, но в данном случае это статья.

Ссылка с классом "close" даст возможность пользователю закрыть окно, и оно больше не появится до обновления страницы.

CSS стилизация

Хорошо, давайте дадим некоторые красивые стили тени, фона для блока:

Мы задаем блоку фиксированное положение fixed, чтобы он двигался за пользователем. Первоначально блок будет скрыт, а появиться в конце страницы, и мы сделаем небольшой эффект выскальзывания на JQuery.

С помощью CSS3 теней мы сделаем красивый, современный вид блока (но это не будет работать в браузерах IE, кроме наверное IE9 и IE10). Текст и ссылки имеют следующие стили:

Вы можете изменить стиль блока и контента внутри, в соответствии с Вашим сайтом или Вашим вкусом. Кнопку закрытия всплывающего блока мы выводим следующим образом:

Со стилями думаю все, теперь приступим к самому главному, на мое мнение, к работе с JavaScript и добавим некоторые эффекты.

Оживление с помощью JavaScript

В начале, мы подключаем библиотеку JQuery:

Теперь мы добавим две функции. Первая определяет, что пользователь достиг контента с id="last", и если это так, то блок выскальзывает. Другая функция закрывает и не показывает блок, если пользователь нажал на кнопку закрыть. Эти 2 функции можно добавить сразу после подключаемой выше JQuery библиотеки:

Вот и все! Я надеюсь, вам понравился этот урок и Вы сможете использовать этот эффект на своем сайте! Скачать готовый исходник, Вы можете как всегда по ссылку вначале статьи. Пользуйтесь!

---

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops/2010/04/13/end-of-page-slide-out-box/
Перевел: Владислав Бондаренко