Design Full Page Overlay Advertisement using HTML, CSS and JavaScript

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 :

Recommended For You

About the Author: Ritesh Ghimire

Ritesh is a Computer Engineer, Web Developer and an active cricket follower.