Сейчас на многих ресурсах используются этот вариант, к примеру: для добавления формы обратного звонка, кнопок социальных сетей, просто заметки (а-ля на полях книги), форм подписок, которые появляются при прокрутке страницы, или просто блока рекламы.
Плагин 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.