How do you make the lightbox appear in front of everything?

Question

I use the Banner do Ebit for customers to be able to evaluate the purchase on the website, however the lightbox it always appears behind all the elements of the page. How to make him appear in front of everything?

The code below is a short version of what is required for the banner to load.

<a id="bannerEbit"></a> <!-- Aqui ele carrega o banner com o background "banner.gif" do próprio Ebit -->

<script id="getSelo" src="https://imgs.ebit.com.br/ebitBR/selo-ebit/js/getSelo.js?storeId&lightbox=true"></script> <!-- Script do ebit de onde vêm as informações e o lightbox -->

as ALMOST should be (just to see the lightbox in this example without the background)

as it is (Notice that the shadow still appears behind, ie the lightbox is loading behind everything)

Answer 1

You can load the script by Javascript (not jQuery) using create.Element and then detect when the script was loaded on the page, with this you can force the z-index the elements of eBit with .onload.

eBit’s elements (background and box) are two ids: #dark and #boxLight respectively. Then do so:

var s = document.createElement("script"); 
s.src = "https://imgs.ebit.com.br/ebitBR/selo-ebit/js/getSelo.js?storeId&lightbox=true"; 
s.id = "getSelo"; 
document.body.appendChild(s);

s.onload = function(){
   $("#dark, #boxLight").css('z-index','99999999');   
}

Don’t forget to put your storeId in the URL.