Question

我有一个带有图片的面板，喜欢做一些类似的东西，如goowmap的针制作者，点击一个umagem气球出现在图像上的信息。

<a id="infowindow"><img src='images/pic-01.jpg'></a>

<script>
    $("#infowindow").click(function(){
      alert("teste");
    });
</script>

下面图片中的橙色气球写着“Rafael Meireles”

Answer 1

如果你修改HTML看起来像这样（注意infowindow现在是一个类）：

<a class="infowindow">
    <img src='images/pic-01.jpg'>
</a>
<div class='infowindow-balloon'>Rafael Meireles</div>

以下jQuery将选择下一个元素，即气球，并在显示和隐藏它之间切换。

$(".infowindow").click(function(){
  $(this).next().toggle();
});

这是用于设置infowindow气球样式的CSS：

.infowindow-balloon {
  display: none;
  font-size: 16px;
  position: absolute;
  margin-top: -40px;
  margin-left: 60px;

  padding: 10px;
  background-color: #f70;
  color: #fff;
}

这是用于在气球左侧创建箭头的CSS：

.infowindow-balloon::before {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  left: -20px;
  border: 10px solid transparent;
  border-right-color: #f70;
}

这是经过修改的代码：http://codepen.io/anon/pen/WQdvdz

在我的图像中的Infowindow对话框气球

1 个答案: