How to overlay floating div on other elements of the web page?

Question

How to overlay floating div on other elements of the web page?

Navigation

#1 by (5 votes)

2

I'm creating a new bookmarklet plugin that will be applied to any Youtube , where I have to add a div floating in body , thus doing appendChild in .

However, a failure is occurring, this floating% is left behind Player and Thumbnails , making it a nuisance for anyone viewing it. >

What I need is to override the div futuante over the Player and Thumbnails .

To get a real idea of what's happening, I invite you to run the plugin below in your web browser, with any preloaded YouTube video.

Code

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

    ];

}());

Now the code already preformatted for 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>

javascript css bookmarklet

asked by anonymous 26.02.2017 / 15:44

1 answer

error with EF and Mysql query Find first name in the mysql field before MYSQL space

score 5 · Accepted Answer

Use the z-index property with the value 999 in the styles of your div with id="pop" , I think this is what you want

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

   ];

}());

Just need to add add.style.zIndex = "999"; to your list of properties