Показать Меню
falbar jQuery End Page Box

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

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.
Источник
www.onextrapixel.com

Подписаться на обновления

Комментариев еще не оставлено