show div при нажатии на изображение с помощью позиции курсора

Question

У меня есть карта с маркерами, как показано ниже. Я хочу показать div «popup» рядом с определенным img, на который я нажал (позиция курсора). Маркеры загружаются вызовом ajax.

JQuery (JS):

$("img").on('click', function(event) { 
    var div = $("#popup"); 
    div.css({ 
     display:"absolute", 
     top:event.pageY, 
     left: event.pageX}); 


    return false; 
}); 

HTML:

<img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: 483px; top: -188px;" src="http://a.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/10/540/357.png"></img> 

<img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: 739px; top: -188px;" src="http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/10/541/357.png"></img> 

<img class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; left: 227px; top: 68px;" src="http://a.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/10/539/358.png"> 
</img> 
<div id="popup">showme</div> 

Answer 1

Видимо вы просто использовали свойство CSS "дисплей" вместо "положение" в вашем JS.

Вот рабочая скрипку: http://jsfiddle.net/T32ZV/

А вот рабочий код:

$("img").on('click', function(event) { 
    var div = $("#popup"); 
    div.css({ 
     position:"absolute", 
     top:event.pageY, 
     left: event.pageX 
    }); 

    return false; 
}); 

Answer 2

скрыть $ ('# всплывающих') первые и ваша собственность CSS была неправа, position вместо display

<div id="popup" style="display:none">showme</div> 

$("img").on('click', function(event) { 
    var div = $("#popup"); 
    div.css({ 
     position:"absolute", 
     top:event.pageY, 
     left: event.pageX 
     }).show(); 

    return false; 
});