在我的图像中显示对话框气球

Question

我有一个带有图片的面板，喜欢做一些类似的事情，在googlemap的别针制造商下面做一些类似的事情，点击一个带有信息的气球出现在图像上。

例

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

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

就像下图中的橙色气球一样写着“拉斐尔·梅雷莱斯”

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();
});

这是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