14 января 2019

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

Таким образом, наше попап-окно не будет назойливо надоедать и мешать навигации по сайту появляясь только один раз.
При помощи CSS окно будет спозиционировано по центру экрана, а сам контент сайта слегка временно затенен. 

 

Итак, html-код:(можно вставить в любое место внутри <body>, я обычно вставляю перед закрывающим тэгом body)

<div class="dynamic_popup_wrap"><!-- бокс, который делает окно невидимым если посетитель уже видел его -->
<div class="dynamic_popup"><!-- оверлей с темным полупрозрачным фоном -->
<div class="popup-block"><!-- само попап-окно -->
Здесь может быть любой html-контент
<div class="close">x</div><!-- кнопка закрытия попап окна -->
</div>
</div>
</div>

 

CSS:

.dynamic_popup {
position: fixed;
z-index: 1003;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .5);
display: none;
}

.dynamic_popup .popup-block {
background-color: #fff;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.3);
text-align: center;
width: 400px; /* ширина окна (может быть любой */
max-width: 96%; /* фиксим ширину для маленьких экранов */
z-index: 1045;
/* центрируем: */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.popup-block .close {
color: #fff;
width: 24px;
height: 30px;
position: absolute;
font: 20px/30px Verdana;
top: -32px;
right: 0;
cursor: pointer;
text-align: center;
text-transform: uppercase;
opacity: 1;
transform: scaleY(.75);
}

 

JavaScript (JQuery должен быть подключен):

$('.dynamic_popup').delay(6000).fadeIn(300); // 6000 - время через которое появится попап в миллисекундах
$(document).mouseup(function (e) { // событие клика по веб-документу
var div = $(".popup-block"); // тут указываем ID элемента
if (!div.is(e.target) // если клик был не по нашему блоку
&&
div.has(e.target).length === 0) { // и не по его дочерним элементам
$(".dynamic_popup").fadeOut(300); // то закрываем окошко
}
});
$('.popup-block .close').click(function(){
$(".dynamic_popup").fadeOut(300); // закрытие по нажатию на крестик
});
if (sessionStorage.beenHere) {
document.querySelector(".dynamic_popup_wrap").style.display = "none"; // не показываем попап окно, если посетитель уже его закрывал
}
sessionStorage.beenHere = true;

 

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

 
Добавить комментарий





Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2020 'Tochcha' Все права защищены