Hidden div to show where click

I need to have a hidden div and show it where ever I click on a page. Do I make its position relative? How do i associate wi开发者_运维知识库th a position of a click?

If you know jQuery, then you can do a simple css({left:e.pageX, top:e.pageY}) in replacement for this sample (click anywhere and you'll get the position):

http://jsbin.com/ufovo3

Here's the code: http://jsbin.com/ufovo3/edit

$(document).click(function(e){ //Change the "document" to whatever you want
  alert('x: '+e.pageX+', y:'+e.pageY);
});

Here's a better demo: http://jsbin.com/ufovo3/2/

source http://jsbin.com/ufovo3/2/edit

Click it and watch it move where you click.

get the position of your cursor using javascript: http://dev-notes.com/code.php?q=33

and set that as the left and top css position using position absolute :)

Use the mouseX and mouseY propierties of an event.

http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

Then set the absolute position of the div after a click.

JSFIDDLE DEMO

$(document).click(function(e) {
    var height = $('#popup').height();
    var width = $('#popup').width();
    leftV = e.pageX - (width / 2) + "px";
    topV = e.pageY - (height / 2) + "px";
    $('#popup').css({
        left: leftV,
        top: topV
    }).toggle();
});


.popup{
    position:absolute;
    background:#cf5;
    z-index:10;
    width:100px;
    height:100px;
    text-align:center;
    color:#4e4e4e;
    display:none;
}