2

Estou criando um novo plugin bookmarklet que será aplicado sobre qualquer página de video do Youtube, onde tenho que adicionar uma div flutuante no body, fazendo assim o appendChild no DOM.

No entanto esta ocorrendo uma falha, esta div flutuante fica atraz do Player e das Thumbnails, tornando um incômodo para quem vai visualizá-la.

O que preciso é sobrepor a div futuante sobre o Player e Thumbnails.

Para se ter uma idéia real do que ocorre, convido você a executar o plugin abaixo em seu navegador web, com um vídeo qualquer do Youtube, pré-carregado.

Código

javascript: (function() {

    var add = document.createElement('div');

    add.id = "pop";

    add.style.display = "block";

    add.style.position = "fixed";

    add.style.top = "0%";

    add.style.left = "0%";

    add.style.width = "100%";

    add.style.height = "100%";

    add.style.background = "black";

    add.style.opacity = ".80";

    document.body.appendChild(add);   

    document.getElementById("pop").innerHTML = [

        '<div style="display: block;position: fixed;top: 50%;left: 50%;margin-left: -150px;margin-top: -100px;padding: 10px;width: 300px;height: 200px;border: 1px solid #d0d0d0;background: whitesmoke;">' +

        '<span style="float:right;"><a href="javascript:(function(){document.getElementById(\'pop\').style.display=\'none\';}());">[Fechar]</a></span>' +

        '<br><br>' +

        '</div>'

    ];

}());

Agora o código ja pré-formatado para bookmarklet

<a href="javascript: (function() { var add = document.createElement('div'); add.id = 'pop'; add.style.display = 'block'; add.style.position = 'fixed'; add.style.top = '0'; add.style.left = '0'; add.style.width = '100%'; add.style.height = '100%'; add.style.background = 'black'; add.style.opacity = '.80'; document.body.appendChild(add); document.getElementById('pop').innerHTML = '<div style=\'display: block;position: fixed;top: 50%;left: 50%;margin-left: -150px;margin-top: -100px;padding: 10px;width: 300px;height: 200px;border: 1px solid #d0d0d0;background: whitesmoke;\'><span style=float:right;><a href=javascript:(function(){document.getElementById(\'pop\').style.display=\'none\';}());>Fechar</a></span><br><br></div>' }());">BookMarklet</a>

<pre>

Clique e Arraste-o para barra de marcadores de seu navegador

Abra um link do video do youtube por exemplo - <a href="https://www.youtube.com/watch?v=DipPJp1Ls5E">https://www.youtube.com/watch?v=DipPJp1Ls5E</a>

Aguarde o carregamento completo da página do video

E logo clique sobre este plugin ja incluso na sua barra de favoritos

Agora confira o que acontece, como descrevi na pergunta

</pre>

1 Resposta 1

5

Utiliza a propriedade z-index com o valor 999 nos styles da tua div com o id="pop", acho que é isto que queres

javascript: (function() {

   var add = document.createElement('div');

   add.id = "pop";

   add.style.zIndex = "999";

   add.style.display = "block";

   add.style.position = "fixed";

   add.style.top = "0%";

   add.style.left = "0%";

   add.style.width = "100%";

   add.style.height = "100%";

   add.style.background = "black";

   add.style.opacity = ".80";

   document.body.appendChild(add);   

   document.getElementById("pop").innerHTML = [

        '<div style="display: block;position: fixed;top: 50%;left: 50%;margin-left: -150px;margin-top: -100px;padding: 10px;width: 300px;height: 200px;border: 1px solid #d0d0d0;background: whitesmoke;">' +

        '<span style="float:right;"><a href="javascript:(function(){document.getElementById(\'pop\').style.display=\'none\';}());">[Fechar]</a></span>' +

        '<br><br>' +

        '</div>'

   ];

}());

so precisa adicionar add.style.zIndex = "999"; na sua lista de propiedades

0

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 .