Div on click

[d-machine]

Hi,

I have a link,
and I want to create such a floating div that will be seen after clicking on the link. The div should include a Close link, that will hide it.
Something like:
http://img198.imageshack.us/img198/2931/explainy.jpg

Thanks! ;)

[Nile]

Quick n' Dirty:


<style type="text/css">
#hello {
display: none;
position: absolute;
top: 300px;
left: 100px;
height: 100px;
width: 100px;
border: 1px solid black;
background: lightblue;
}
</style>
<a href="javascript:void(0)" onclick="document.getElementById('hello').style.display='block'">SHOW</a>
<div id="hello"><a href="javascript:void(0)" onclick="this.parentNode.style.display='none'">BLAH</a></div>

[d-machine]

Thank you very much!
However, is there a way to position it so it to appears always at to bottom of the link,
(since right now it depends on the size of the window)?

[Nile]

Here:

<style type="text/css">
#hello {
display: none;
position: absolute;
height: 100px;
width: 100px;
border: 1px solid black;
background: lightblue;
}
</style>
<script type="text/javascript">
var show = function (toggleID, me){
toggleID.style.left = me.offsetLeft;
toggleID.style.top = me.offsetTop + me.fontSize;
toggleID.style.display = "block";
};
</script>
<a href="javascript:void(0)" onclick="show(document.getElementById('hello'), this);">SHOW</a>
<div id="hello"><a href="javascript:void(0)" onclick="this.parentNode.style.display='none'">BLAH</a></div>