Search code examples
htmlcssleadbolt

Close Button overlay on Leadbolt ad

Im using Leadbolts HTML Ads on my mobile App. Currently it looks like this:

enter image description here

What I am trying to achieve is put an X into the top right, so that the user can close the ad.

The code for the ads looks like this:

<body>
  <script type="text/javascript" src="http://ad.leadboltmobile.net/show_app_ad.js?section_id=619553414"></script>
</body>

First i tried to put an image on top of it like this:

HTML:

<body>
  <img id="x" src="@routes.Assets.at("images/x.png")" onclick="closeAd()"/>
    <script type="text/javascript" src="http://ad.leadboltmobile.net/show_app_ad.js?section_id=619553414"></script>
</body>

CSS:

#x {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
}

Even though the image is absolutly positioned it doesn`t show up at all.

Then i tried to wrap the ad in a div.

HTML:

<body>
  <img id="x" src="@routes.Assets.at("images/x.png")" onclick="closeAd()"/>
  <div id="adWrapper">
    <script type="text/javascript" src="http://ad.leadboltmobile.net/show_app_ad.js?section_id=619553414"></script>
  </div>
</body>

CSS:

#x {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
}

#adWrapper {
    position: absolute;
    top: 45px;
}

But the ad is still displayed fullscreen as shown in the image.

Could somebody help me out here?

Solution

  • A higher z-index than the #adWrapper will fix it. Use z-index this way:

    #x {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    z-index: 2;
}

#adWrapper {
    position: absolute;
    top: 45px;
    z-index: 1;
}