Как сделать самый простой всплывающий блок с информацией? (Продолжение)


<<< На предыдущую  На двух страницах.  Страница 2.

Блок появляется при загрузке и перезагрузке


В первом примере блок всплывал один раз при открытии страницы, затем для его появления требовалась чистка Cookies или перезапуск браузера (если настроена чистка «куков» при перезапуске), а в данном примере, судя по названию, будет надоедать посетителям и при загрузке и при перезагрузке страницы.

Так же, как и в первом случае, код JavaScript выделите, скопируйте и разместите между тегами head:


<script type="text/javascript" language="JavaScript1.2">

// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit //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
}

window.onload=initbox
</script>

Код, который Вы видите ниже, таким же образом выделите, скопируйте и вставьте сразу после тега body:


<div id="dropin" style="position:absolute;visibility:hidden;left:30px;top:100px;width:250px;height:240px;background-color:#F7DCB4">
<div align="right"><a href="#" onClick="dismissbox();return false"><img src="//www.yoursite.ru/images/close.gif" border="1" vspace="0" hspace="0" align="right" width="15" height="15" alt="закрыть"></a></div>
<center><font style="font-size:19px; color:#FF0000;"><br>Полностью<br>автоматизированная<br>партнёрская программа</font><br><br><a href="URL рекламируемой страницы" target="_blank"><img src="Путь к изображению" border="0" alt=""></a><br><br>
<a href="URL рекламируемой страницы" target="_blank"><strong>Смотреть>>></strong></a></center>
</div>

Здесь точно так же можно изменять переменные: отступ слева и сверху, высоту и ширину самого блока, «background» блока, размеры кнопки закрытия и свой текст.

Исходники (3,0 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Благодарю за внимание. Будьте здоровы, богаты и счастливы! L.M.


<<< На предыдущую  На двух страницах.  Конец страницы 2.

Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика