javascript - 使用光标位置单击图像时显示 div

Question

我有一张带有标记的 map ，如下所示。我想显示靠近我单击的特定 img(光标位置)的 div“弹出窗口”。标记由 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

显然您只是在 JS 中使用了 CSS 属性“display”而不是“position”。

这是一个工作 fiddle :http://jsfiddle.net/T32ZV/

这是工作代码:

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

    return false;
});