Search code examples
javascriptjqueryadsinterstitialgoogle-dfp

Close button with an interstitial out of page ad

I'm trying to add a close button to an interstitial out of page ad in dfp but I cannot get it to work. I've tried to follow the instructions provided by google but no luck.

This is my code

<script>
$(document).ready( function() {
    $(window.parent.document).find('body').css({
        "Background-Attachment": "fixed",
        "Background-Image": "url('[%Image%]')",
        "Background-Position": "top center",
        "Background-Repeat": "no-repeat",
    });

    $(window.parent.document).find('body')
        .after('<a href="%%CLICK_URL_UNESC%%[%ClickthroughURL%]" target="_blank">' + 
            '<img src="%%VIEW_URL_UNESC%%[%Image%]" style="display:block;position:fixed;left:0;top:0;width:100%;height:100%;cursor:pointer" />/a>');


});
</script>
<script>
function closeHandler() {
  Enabler.reportManualClose(); 
  Enabler.close();
}
</script>

<style>
#close-btn {
  position: absolute;
  width: 20px;
  height: 18px;
  top: 0px;
  left: 278px;
  cursor: pointer;
  z-index:220;
  background-image: url('[%Closebtn%]');
  background-repeat: no-repeat;
}
</style>

<div id="close-btn"></div>

Thanks any help would be appreciated

Solution

  • I figured this out so here is the solution. Code changed a bit but I'm achieving the result i wanted.

    <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Test 1</title>
   <style type="text/css">
    .center-me {
        position: absolute;
        visibility: visible;
        width: 100%;
        height: auto;
        margin: 0;
        z-index: 10;
        top: 50px;
        left: 0;
    }

    .center-me img {
         width: 100%;
         height: auto;
   }

    #close-btn {
        position: absolute;
        width: 45px;
        height: 45px;
        top: 70px;
        right: 15px;
        cursor: pointer;
        z-index:220;
        background-image: url('[%CloseBtn%]');
        background-repeat: no-repeat;
    }
  </style>

  <script>
  $(document).ready(function(){
    $("#close-btn").click(function(){
        $(".ad-wrapper").fadeOut(500);
    });

});
  </script>
 </head>

 <body style="margin: 0px;">
    <div class="ad-wrapper">
        <div id="close-btn"></div>
        <a href="%%CLICK_URL_UNESC%%[%ClickthroughURL%]">
          <div class="center-me">
            <img src="%%VIEW_URL_UNESC%%[%ImageFile%]"></img>
          </div>
        </a>
    </div>
 </body>

</html>