How to make a div pop up using a bookmarklet? - 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);