如何使用 Jquery 或 Jquery 插件生成像 Google 地图中那样的弹出窗口？

Question

当您使用 Google 地图时，单击地图上的标记，然后会弹出一个窗口。您甚至可以输入您的手机号码并接收来自 Google 的短信。如何使用 Jquery 或 Jquery 插件生成弹出窗口？

Answer 1

我假设 Google 地图只是您想要的效果的一个示例，而不是您的项目基础：

这实际上只不过是显示特定的 div，然后隐藏它。

$("a.popup1").click(function(e){
  e.preventDefault();
  $("div.popup1").toggle();
});

-

<a class="popup1" href="enable-javascript.html">Show Popup</a>
<div class="popup1"><p>This is where your data goes.</p></div>

-

如果 Google 地图实际上是您的项目基础，我建议您查看 jMaps，一个 jQuery谷歌地图插件。添加标记和 pointHTML（您所说的那些窗口）的示例可以在这里找到：http://github.com/digit...Google.Markers.AddMarker.html

Answer 2

有各种各样的变体，但基本上您要做的是：

1. 首先，向文档（或某些容器元素，取决于您的站点的外观）添加一个“div”，
2. 运行 AJAX 事务来获取你的小弹出窗口的内容（如果它不在页面上隐藏的某个地方）
3. 给div适当的CSS你想要类属性以你想要的方式设置它的样式（重要的是，使它可见:-)

在你的弹出窗口中框应包含一个按钮或其他一些控件以允许将其删除。您可以使用 jQuery offset() 函数查找被单击的内容的页面位置，然后可以使用位置信息（左上角）来定位浮动元素。您的浮动元素可能应该使用绝对定位进行定位，并给出一个大于周围内容的“z-index”值。

具体如何做到这一点实际上很大程度上取决于您的网站的外观、其他内容的排列和定位方式以及您如何获取/合成弹出窗口的内容。