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:


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>