jquery - 我图像中的信息窗口对话框气球

Question

我有一个带有图片的面板，喜欢做一些类似于 infowindow 的 googlemap 的图钉制作器，点击一个 umagem 一个带有信息的气球出现在图像上。

exemple

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

这是设置信息窗口气球样式的 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