How to make the lightbox appear in front of everything?

Question

How to make the lightbox appear in front of everything?

Navigation

#1 by (1 votes)

0

I use the Ebit Banner for customers to evaluate the purchase on the site, but the lightbox of it always appears behind all elements of the page. How do you make it appear in front of everything?

The code below is a summarized version of what the banner requires.

<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><!--Scriptdoebitdeondevêmasinformaçõeseolightbox-->

asitMUSTbe(justtoseethelightboxinthisexamplewithoutthebackground)

Asyouare(notethattheshadowstillappearsbehind,iethelightboxisloadingbehindeverything)

javascript html css

asked by anonymous 04.01.2018 / 19:45

1 answer

Error saving JPEG image to bank as string (base64) Consult with distinct in Laravel

score 1 · Accepted Answer

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

The elements (background and box) of eBit are two ids : #dark and #boxLight respectively. So do this:

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');   
}

Do not forget to put your storeId in the URL.