На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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



Если вам понравился наш блог, то, пожалуйста, лайкните его себе на стену. Вам это ничего не стоит, а нам приятно :)

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

Пример можно увидеть на данной страничке: появляющееся через 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 - я вам обязательно отвечу в течение одних суток. Максимум двух.




тегизаметки, javascript





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Шифрование строки с помощью C# и SHA-1
Зачем нужна форма обратной связи, или проблемы с почтой на сайте


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.