Главная / Статьи / Как сделать всплывающий блок на сайт

Предложения

Готовые интернет-магазины (интернет-магазин в аренду)
Создание сайтов
Администрирование сайтов
Базовая оптимизация
Региональное продвижение по России

Сборник тематических статей «AP-Web Article»

Переход на цифровое вещание и его преимущества
Выбираем ресторан для свадьбы.
Монтаж фасадного декора
Деревянные лестницы для живущих в стремительном ритме
Тротуарная плитка для ЦПКиО: выбор для рязанского парка
Беседка из пластиковых бутылок своими руками или как меньше выбрасывать мусора
Золотой век бижу… С чего все начиналось
Мода и украшения. От 1900-х к 80-м – что было на пике и почему
Такси заказ онлайн
Выбор подарков для бородачей – на что обратить внимание?

Регистрация доменов Участник проекта CMS Magazine

Как сделать всплывающий блок на сайт

К всплывающим блокам или пупандерам отношение у меня двоякое.
Лично мне не нравится когда заходя на страницу новости она закрывается блоком. И даже бывает так, что нажимая на «красный крестик» в уголке блока переадресация всё-равно происходит против моей воли. разумом я понимаю, что реклама должна давать свои плоды…

Кому то нравится, кому-то не нравится, но всплывающий блок зачастую просто требуют заказчики для того, чтобы обратить внимание на актуальную акцию или выдвинуть на первое место какой либо товар

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

Блок будет открываться 1 раз за всё время пока посетитель будет на Вашем сайте. Лишь после перезагрузки броузера блок «всплывет» ещё раз.При переходе со страницы на страницу блока не будет.
Это хоть как то, но уменщит гнев особо раздражительных посетителей. Кнопочка «X“-“Закрыть» тоже работоспособна и не перенаправляет посетителя на другие сайты без его ведома.

Этот код JavaScript выделите, скопируйте и разместите между тегами <head> </head>. Тут менять или что-либо добавлять в код не стоит.

<script language="JavaScript1.2">
// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
// This credit MUST stay intact for use
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"
var bouncelimit=32 //(must be divisible by 8)
var direction="up"
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}
function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function dropornot(){
if (get_cookie("droppedin")==""){
window.onload=initbox
document.cookie="droppedin=yes"
}
}
dropornot()
</script>

Нижепредставленный код таким же образом скопируйте и вставьте сразу после тега <body>.
Тут уже можно настраивать параметры отображения, если Вас не устраивает «выпадание» банера в средине сайта.
Пример работы блока можно посмотреть тут (в демонстрационном примере блок сдвинут влево).

<!--Pup blok-->
<div id="dropin" style="position:absolute;visibility:hidden;left:400px;top:300px;width:360px;height:250px;background-color:#EBEBEB">
<div align="right"><a href="http://ap-web.ru/articles/primer-vsplivblok/" target="_blank" onClick="dismissbox();return false">
<img src="http://ap-web.ru/hostcmsfiles/images/delete.gif" border=1 vspace=0 hspace=0 align="right" width="15" height="15"title="закрыть" alt="закрыть"/>
</a></div>
<p>
<center>
<font style="font-size:18px; color:#FF0000;">Нужен помощник в бизнесе?<br>Коммерческий транспорт Peugeot -<br>весь модельный ряд в Перми</font><br><br><a href="http://www.peugeot-perm.ru/professional/" target="_blank"><img src="http://www.peugeot-perm.ru/files/prof/571-7a255e.jpg"   border="0"></a><br><br>
<a href="http://www.peugeot-perm.ru/professional/" target="_blank"><font style="font-size:18px; color:#FF0000;">УЗНАТЬ ПОДРОБНЕЕ>>>
</font>
</a>
</center>
</p>
</div>
<!--End Pup blok-->

 

Настройки расположения и размеров блока:

left:400px; — отступ от левого края (практически посредине страницы)
top:300px; — отступ от верхнего края
width:360px; — ширина блока (если ставите картинку, а не текст, то по размерам картинки)
height:250px — высота блока (если ставите картинку, а не текст, то по размерам картинки)

Настройки текста и картинки:

<font style= «font-size:18px; color:#FF0000;»>Нужен помощник в бизнесе?<br>Коммерческий транспорт Peugeot -<br>весь модельный ряд в Перми</font><br><br><a href= «http://www.peugeot-perm.ru/professional/» target=“_blank»><img src= «http://www.peugeot-perm.ru/files/prof/571-7a255e.jpg»   border= «0»></a><br><br><a href= «http://www.peugeot-perm.ru/professional/» target=“_blank»><font style= «font-size:18px; color:#FF0000;»>УЗНАТЬ ПОДРОБНЕЕ>>></font></a>

Размер букв текста18 пикселей, цвет букв FF0000
Текст понятен и без пояснения
a href= «http://www.peugeot-perm.ru/professional/» target=“_blank» -ссылка на страницу, которая откроется в новом окне после нажатия на банер
img src= «http://www.peugeot-perm.ru/files/prof/571-7a255e.jpg»   border= «0» — место нахождения фоновой картинки для Вашего всплывающего блока

ДЕМОНСТРАЦИЯ работы блока!

14.06.201214567 просмотров.