Double Popup Banner With CSS
And Javascript Timeout - This banner popup is quite effective to get clicks
from visitors, so it is suitable for displaying a product's advertising banner.
Previously I have shared how
to make a banner popup with CSS and Javascript Timeouts . Well, now I make a
double popup banner that is this popup containing 2 banners displayed one by
one.
Clicking on the first banner
will bring up the second banner. I think this is still reasonable, but if more
than two banners might upset visitors.
I made this double popup
banner after seeing that there were 2 pieces of popup banners that were piled
up together so it was less comfortable to see.
And in this tutorial I fixed
the image problems that were detected in the lighthouse and pagespeed insight
to defer images. The first image will be loaded as soon as a popup appears and
the second image will be loaded on the first banner click so that it doesn't
add to blog loading.
In addition, now added with
CSS animation for the appearance of the popup banner so it does not look
surprising.
1. CSS Code
Please save the following
CSS in your blog style.
/*CSS Double Popup Ads - Bloggerdyah */
.hide{display:none}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000}
.pop-content{width:850px;height:450px;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)}:active,:focus{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)}}2. HTML and Javascript code
Please save the following
code above the code </body>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKDKhLQMxU05-QC6wg5Q6_VWXQPExNe1BslIatGHjqMOB-kyZoEy4P3TgIIW5Etgp2T_DtIxQPOQ8Ol4jzXNeT0LlZKpJJl0FZuaO8AD7_a_R4eag60F0YAFYf8tBLTp26mLD_JD3MWA/s850/ramadan.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipO13P72XHdd8Kh4zhPXBpf2QzjbnLBbZDdkwzECHWlcJW77K4PXXlNDA-ijzfgJU3s7swd0Bw1siugwKW-y6iGqhaYk-hzHuvHguYz4FRWbz9yDQpEv4bIAR-Vu22qYMkNFHi6qFInnc/s850/laptop.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>All you have to do is change the first and second image URLs and complete the click destination URLs that are marked. Create a banner with a size of 850x450.
Good luck and hopefully
useful.