How to make a div pop up using a bookmarklet?

Question

How to make a bookmarklet where there's a div that pops up in the middle of the screen?

Seems very simple, i just can't get it down.

Answer 1

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

• The outer div is has fixed position at top 50%; left: 0px; right 0px; height: 1px and overflow: visible
• The innder div is absolutely positioned to left: 50%, top: minus the height of the div and has a margin-left of minus the width of the div. That is:

#

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

Don't forget that IE6 doesn't support position: fixed so you might want to fall back to position: absolute and scroll to the top of the page if you detect IE6.

As for the bookmarklet: you need to write javascript that constructs these elements and append it to the bottom of the page. Here's a detailed tutorial on 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);