cómo colocar un div emergente basado en la posición de donde está el cursor hace clic

Question

que estoy tratando de colocar un div emergente a continuación:

<div style="display:none;height:200px;width:200px;border:3px solid green;" id="popup">Hi</div> 

basado en el clic de otro div.

Estoy funcionando esto en el documento ready

$('div#d').bind('click', function (event) { 
var offset = $(this).offset(); 
$('#popup').css('left',offset.left);  
$('#popup').css('top',offset.top); 
$('#popup').css('display','inline');   
}); 

pero lo anterior ni siquiera voy a mostrar el div

Answer 1

El problema radican en el hecho de que compensado() no devuelven la posición correcta del ratón, tratar event.pageX y event.pageY lugar:

$(document).ready(function(){ 
    $('div#d').bind('click', function (event) { 
    $('#popup').css('left',event.pageX);  // <<< use pageX and pageY 
    $('#popup').css('top',event.pageY); 
    $('#popup').css('display','inline');  
    $("#popup").css("position", "absolute"); // <<< also make it absolute! 
    }); 
}); 

Ver here.

Answer 2

Trate de añadir a su position: absolute div. Asegúrese de que no se encuentre dentro de otro div que tenga un posicionamiento relativo.

<div style="position: absolute; display:none;height:200px;width:200px;border:3px solid green;" id="popup">Hi</div> 

Top y sólo dejó el trabajo para los elementos con relative, absolute o fixed posicionamiento.