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

Question

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

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

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

类似于下图中的橙色气球，上面写着 "Rafael Meireles"

Answer 1

如果您将 HTML 修改为如下所示（请注意 infowindow 现在是 class）：

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

下面的 jQuery 将 select 下一个元素，即气球，并在显示和隐藏之间切换。

$(".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

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

Infowindow dialog balloon in my image

css

jquery

zurb-foundation