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

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

这是一个工作小提琴：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

首先隐藏$（'＃popup'）并且您的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;
});

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

2 个答案: