Most of the websites nowadays are attracted to full page overlay ads for promoting third party as well as their own content in the websites.
In this article, we have a code snippet which you can include in any webpage where you want to display the overlay advertisement.
Source Code :
Include the following code in the <body> of the webpage where the advertisement is to be shown :
<style>
#overlay-ad .image{
position:relative;
}
#overlay-ad {
position: fixed;
text-align: center;
top: 0;
right:0;
height: 100%;
width: 100%;
z-index: 9999;
min-height: 500px;
}
#overlay-ad .wrap {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
height: 100vh;
}
#overlay-ad:before {
content: '';
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.8);
}
#overlay-ad .icon-close {
color: #fff;
cursor: pointer;
float: right;
height: 28px;
width: 28px;
border: 1px solid #fff;
position: absolute;
top: -8px;
right: -10px;
border-radius: 50%;
line-height: 1.8;
background: #ff0000;
font-weight: bold;
font-size: 0.9em;
}
.icon-close span{
position: absolute;
font-size: 0.8em;
left: 6px;
}
</style>
<div id="overlay-ad" onclick="hideOverlay();">
<div class="wrap">
<div class="image">
<span style="font-family: Arial; font-size:12px;display:block;text-align:left;color:#ccc">Advertisement</span>
<div class="bg-lightgray text-center ">
<a target="_blank" href="http://letzcricket.com">
<img src="https://storage.googleapis.com/ehimages/2017/10/8/img_c3a65a3c21a122ea6606d209f08f5f9f_1507459528403_original.png" class="img-responsive">
</a>
</div>
<i class="icon-close" onclick="hideOverlay();"><span>X</span></i>
</div>
</div>
</div>
<script>
function hideOverlay(){
document.getElementById('overlay-ad').style.display = 'none';
}
</script>
Follow this video for complete guidance :
