How to make div pop up using bookmarklet?

Question

How to make a bookmarklet where there is a div that appears in the middle of the screen?

It seems very simple, I just can’t take it off.

Answer 1

To make a div in the middle of the screen, you need two divs, one inside the other:

• The outer div has a fixed position of 50%; left: 0px; right 0px; height: 1px and overflow: visible
• The inner div is absolutely located on the left: 50%, top: minus the height of the div and has a left edge from minus the width of the div. I.e:

#

<div id="outerDiv"> <div id="innerDiv"> Your content </div> </div> 

 #outerDiv { position: fixed; top: 50%; height: 1px; left: 0px; right: 0px; overflow: visible; } #innerDiv { position: absolute; width: 200px; height: 100px; left: 50%; margin-left: -100px; top: -50px; } 

Do not forget that IE6 does not support the position: fixed, so you can return to the position: absolute and scroll to the top of the page if you find IE6.

As for the bookmarklet: you need to write javascript that constructs these elements and adds it to the end of the page. A detailed guide to adding elements to a page with javascript .

Answer 2

  javascript: var theDiv = document.createElement ('div');  theDiv.appendChild (document.createTextNode ('hello'));  theDiv.style.position = "absolute"; theDiv.style.left = '50% '; theDiv.style.top = '50%'; theDiv.style.border = 'solid 2px black';  document.body.appendChild (theDiv);  void (0);