О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » jQuery end Page Box для всплывающих сообщений
  • Инструменты
  • Заработок
  • Раскрутка
04 февраля 2016 . Антон Кулешов

jQuery end Page Box для всплывающих сообщений

В процессе прокрутки пользователем страницы, часто бывает нужно что-нибудь подсказать ему или показать – для этого существуют всплывающие сообщения при прокрутке. Сейчас на многих ресурсах используются этот вариант, к примеру: для добавления формы обратного звонка, кнопок социальных сетей, просто заметки (а-ля на полях книги), форм подписок, которые появляются при прокрутке страницы, или просто блока рекламы.

Плагин jQuery end Page Box добавляет внизу страницы блок с всплывающим сообщением, куда можно поместить как обычный текст, так и HTML форму. На странице демо можно увидеть несколько примеров работы скрипта.

Первым делом подключим CSS стили и сам плагин с jQuery библиотекой между тегами head:

<link href="css/endpage-box.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.endpage-box.js" type="text/javascript"></script>

После этого у нас есть два варианта подключения скрипта всплывающих сообщений. Первый - добавить HTML каркас подсказки, главное указать class=endpage-box и вызвать для него метод endpage_box(), с переданными в него настройками:

<div id="custom-div" class="endpage-box">
  <!-- Контент для показа сообщения -->
</div>

<script type="text/javascript">
  $(window).load(function(){

      $("#custom-div").endpage_box({
            animation: "slide"
        });
 });
</script>

Второй способ не требует от нас добавления HTML, мы просто предаём нужный нам контент в параметр content.

Давайте рассмотрим другие параметры, которые мы можем указать при инициализации плагина всплывающих сообщений:

  • animation – вид анимации, при помощи которой будет появляться сообщение (fade, slide);
  • from – в этом параметре мы указываем с какой позиции показывать подсказку (указывается как px так и в процентах);
  • to – аналогично предыдущему параметру, только тут указывается до какого момента отображать;
  • content – этот параметр мы уже рассмотрели выше, но стоит отметить, что сюда можно указывать как текст, так и HTML.
#Всплывающие подсказки
6 837
Антон Кулешов
Всплывающие подсказки на чистом CSS Всплывающие подсказки на CSS Реализуем всплывающие сообщения без использования JavaScript Делаем всплывающее сообщение используя CSS и jQuery Как сделать всплывающие подсказки, разбираемся с WebUI Popover
Комментарии не найдены

Набор из 14 вкладок HTML

О том, как скачать видео с Ютуба и Вк

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание