Posted on By seodiz_baza_

Скрипт всплывающего сбоку окна с рекламой или сообщением

Всплывающие окна для сайта

Этот яваскрипт, работающий на фреймворке jQuery при прокрутке содержимого окна браузера выводящий внизу страницы появляющееся сбоку окошко, является довольно универсальным, поскольку в выводимый скриптом блок можно поместить практически что угодно: контекстную рекламму, тизеры, баннеры, список похожих или популярных записей, а также призыв добавить страницу в закладки или подписаться на обновления блога или сайта.

Необходимым и обязательным условием для работы скрипта является подключенный к сайту фреймворк jQuery, о том как он подключается я вам уже рассказывал ранее.

Скрипт всплывающего сообщения в окне

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

Все настройки положения выдвигающегося окна, его высоты, ширины и т. д. производятся в самом javascript (скрипте) или css стилях назначенных всплывающему блоку.

Код скрипта (javascript)

(function ($) {
$(function () {
var $sideroll       = $("#sideroll"), // айди блока который будет появляться
$watch_block    = $("#content"),  // айди блока положение которого отслеживается

enabled         = true,
hide_offset     = 5,
outer_margin    = 10,
shown           = false,

show = function() {
if(shown) return;
shown = true;

$sideroll.stop().animate({right: -hide_offset}, 300);
},

hide = function() {
if(!shown) return;
shown = false;

$sideroll.stop().animate({right: -$sideroll.outerWidth()-outer_margin}, 300);
},

disable = function(e) {
e.preventDefault();
enabled = false;
hide();
},

onscroll = function() {
if(!enabled) return;

var viewport_bottom = $(window).scrollTop() + $(window).height(),
block_bottom    = $watch_block.offset().top + $watch_block.outerHeight();

if(viewport_bottom > block_bottom)
show()
else
hide();
};

$(«.roll-close», $sideroll).click(disable);

$(window).scroll(onscroll).resize(onscroll);
})
})(jQuery);

HTML код


<script src="/sideroll.js" type="text/javascript"></script>
<div id="sideroll">
<span class="roll-close">X</span>
<h4>Заголовок сообщения</h4>
Текст сообщения, контекстная реклама и прочее...
</div>

Данный html код желательно вставить в самый конец кода страницы перед загрузкой футера, не забудьте указать полный путь до файла скрипта.

CSS стили

#siderol {
position: fixed;
top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");
overflow: hidden;
bottom: 20px; /*Расстояние до нижнего края окна*/
right: -100%; /*Появляется справа, чтобы поменять сторону замените на: left */
width: 240px; /*Ширина выезжающего блока*/
z-index: 99999;
background: #fff;
font-size: 11px;
line-height:1.4em;
border: 1px solid #ebebeb;
border-radius: 7px;
padding: 10px 15px 10px 10px; /*Отступы от краев до текста*/
min-height: 100px;
-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
#siderol .roll-close {
display: block;
position: absolute;
width: 15px;
height: 15px;
top: 10px;
left: 10px;
cursor: pointer;
font-weight: bold;
font-size: 15px;
text-shadow: #000 0px 0px 1px;
}
#siderol h4{font-size:18px;margin:0 0 10px;}

Конечно для каждого конкретного сайта и под каждый дизайн в скрипт, код и стили потребуется вносить изменения, без них я вам корректную работу скрипта не гарантирую. Прежде чем устанавливать его на реально действующий сайт, во избежание его поломки настоятельно советую потренироваться с его настройкой на локалке (установив денвер).

Также прошу не обращаться (в массовом порядке), за помощью в его настройке и установке на сайт, поскольку к моему сожалению всем помочь я все-равно ввиду нехватки времени не смогу.

На момент публикации статьи вы можете посмотреть скрипт в работе прямо на моем блоге, прокрутив любую из страниц вниз, как долго он будет стоять пока не знаю.

Читайте также: jquery скрипты реклама html css javascript