Двойной всплывающий баннер на CSS с таймаутом

Доброго времени суток, друзья. Двойной всплывающий баннер очень эффективен, чтобы получить клики от посетителей. Он подходит для показа рекламируемых товаров или партнёрок. Не спешите сразу говорить, что это раздражает, хотя доля правды в этом есть. Однако, для блогов с определённой тематикой он вполне уместен. 

Многие занимаются продвижением товаров и услуг и, такой вариант всплывающего окна, содержащего 2 части, стали популярны сейчас. Клик по первому баннеру, вызовет второй. 

Демонстрация

Если хотите попробовать  - вот код

 

<style>
.hide{display:none;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:650px;height:350px;display:block;position:absolute;top:50%;left:50%;margin:-225px 0 0 -425px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}
:focus,:active{outline:0}
.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}
.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}
.popbox-close-button{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;top:-14px;right:-14px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;padding:0}
.popbox-close-button svg{vertical-align:middle}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:850px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}</style>
<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()' role='button' tabindex='0'></div>
<div class="pop-content slideInUp">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()'>
<div class="popcontent" id='imgcontent'>
<!-- <img src="https://1.bp.blogspot.com/-kkOAfcer9GY/XqrrBoIdN1I/AAAAAAAANo4/36RF-odXxMI4PDIVtzAByB_hqsQdZ3X8QCLcBGAsYHQ/s1600/%25D0%25BA%25D0%25B0%25D1%2580%25D1%2582%25D0%25B8%25D0%25BD%25D0%25BA%25D0%25B8.jpg" alt="banner" width="850" height="450"/> -->
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()'><svg height='24' viewbox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>
<div class="popbox hide" id="popbox2">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();' role='button' tabindex='0'></div>
<div class="pop-content slideInLeft">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'>
<div class="popcontent" id='imgcontent2'>
<!-- <img src="https://2.bp.blogspot.com/-mQkzOxuTHoY/XKSnYc4gQvI/AAAAAAAALz8/cK00Wq_G3woqK-nLsUuiciI6bUitROxSwCLcBGAs/s400/%25D1%258D%25D1%2584%25D1%2584%25D0%25B5%25D0%25BA%25D1%2582.jpg" alt="banner" width="850" height="450"/> -->
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'><svg height='24' viewbox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.documentElement.className+=" flowbox";
 document.getElementById('imgcontent').innerHTML = document.getElementById('imgcontent').innerHTML.replace('<!--','').replace('-->','');
 }, 5000);
function showImage(){document.getElementById('imgcontent2').innerHTML = document.getElementById('imgcontent2').innerHTML.replace('<!--','').replace('-->','')};
function removeClassonBody(){var element=document.documentElement;element.className=element.className.replace(" flowbox","")}
//]]>
</script>

 Голубым цветом я отметила размеры баннеров width:650px;height:350px;

Измените адреса ваших изображений в строках розового цвета. Собственно, вот и все настройки. Код устанавливается в гаджет HTML/JavaScript в любом месте блога. 

Ещё 2 варианта статичного ротатора баннеров  для установки в блоге.

Все посты сайта в категориях гаджеты, дизайн,css

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email