0

Eu uso o Banner do Ebit para os clientes poderem avaliar a compra no site, porém o lightbox dele sempre aparece atrás de todos os elementos da página. Como fazer para que ele apareça na frente de tudo?

O código abaixo é uma versão resumida do necessário para o banner carregar.

<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 -->

como QUASE deve ser (só para verem o lightbox nesse exemplo sem o background) Exemplo de como QUASE deve ser (só para verem o lightbox)

como está (Reparem que ainda aparece a sombra atrás, ou seja, o lightbox está carregando atrás de tudo) como está

3
  • Tentou configurar o z-index?
    – hugocsl
    Commented 4/01/2018 às 18:51
  • como configurar o z-index tendo um script externo chamando uma variável? Commented 4/01/2018 às 19:38
  • o Z-index é uma classe CSS que controla o "eixo Z" dos elementos. Resumindo ele traz um elemento para frente do outro, desde que o elemento também tenha um "position" setado. O z-index quanto maior, mais o Elemento vem para frente dos outros. Qui vc pode ler a respeito w3schools.com/cssref/pr_pos_z-index.asp
    – hugocsl
    Commented 4/01/2018 às 19:46

1 Resposta 1

1

Você pode carregar o script por JavaScript (não jQuery) usando create.Element e depois detectar quando o script foi carregado na página, com isso você pode forçar o z-index os elementos do eBit com .onload.

Os elementos (fundo e o box) do eBit são duas ids: #dark e #boxLight respectivamente. Então faça assim:

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

Não esqueça de colocar o seu storeId na URL.

9
  • então não funciona com aquele jQuery? Commented 4/01/2018 às 19:53
  • @CianoBarbarossa não irá funcionar não.
    – Sam
    Commented 4/01/2018 às 19:54
  • não porque não existe a variável s Commented 4/01/2018 às 19:54
  • @CianoBarbarossa Pode ser que funcione com jQuery, se adicionar um setTimeout
    – Sam
    Commented 4/01/2018 às 19:55
  • pode dar um exemplo? Commented 4/01/2018 às 19:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .