Окно на сайт, всплывающее через некоторое время

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

Пример можно увидеть на данной страничке: появляющееся через 20 секунд окно. Пока вы читали текст, оно уже, наверно появилось, да? Обратите внимание, это не обычное всплывающее окно, которые уже блокируются всеми браузерами, а встроенный div на странице. Как это сделать? Все просто.

Решение состоит из двух частей: стили со скриптом и верстка окна. Первая часть:

<style>
#darker {
display: none;
position: absolute;
width: 250px;
height: 250px;
position: absolute;
top: 50%;
left: 50%;
margin: -125px 0 0 -125px;
background-color: #EEEEEE;
text-align: center;
}

#closeZ {
position: absolute;
right: 0;
}
</style>
<script type="text/javascript">
function windowUp () {
document.getElementById('darker').style.display="block";
document.body.style.backgroundColor = 'rgba(0,0,0,0.5)';
}
setTimeout('windowUp();', 20000);

function windowClose () {
document.getElementById('darker').style.display="none";
document.body.style.backgroundColor = '#EEEEEE';
}
</script>

На самом деле все проще некуда. Делаем первоначально окно невидимым в стилях, а потом фуккцией javascript проявляем его. Также добавлено немног остилей для центрирования окна и креста для его закрытия. Таймер ставим на 20000 - это в миллисекундах; требуемое число секунд надо умножить на 1000. windowUp() - функция, показывающая окно, windowClose() - закрывающая.

Вторая:

<div id="darker">
<img src="img/art163-2.png" id="closeZ" onclick="windowClose()" />
<img src="img/art163-1.png" /><br />
Если вам понравился наш блог, то, пожалуйста, лайкните его себе на стену. Вам это ничего не стоит, а нам приятно :)	<br />	
<div style="text-align: center;">
Здесь кнопки соцсетей	
</div>
</div>

С версткой тоже все просто: див, котором пишем все, что угодно, не забывая присвоить ему ид darker и изображение крестика для закрытия. Примечание: код центрирования выскакивающего окна не учитывает то, что пользователь может проскроллить страницу. Также можно добавить невозможность щелкать что-то другое, пока не закрыто всплывающее окно, но это уже все мелочи и частности.

Вот так легко и просто можно поставить на своем сайте всплывающее через определенный промежуток времени окно. Если вам что-то требуется заменить, удалить, добавить, расширить функционал или реализовать любую фантазию на вашем сайте, то вы можете обратиться ко мне. Почта up777up@yandex.ru - я вам обязательно отвечу в течение одних суток. Максимум двух.