如何使用Jquery或Jquery插件在Google地图中生成类似的弹出窗口？

Question

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

Answer 1

我认为谷歌地图只是你想要的效果的一个例子，而不是你的项目基础：

这只不过是显示一个特定的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>

-

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

Answer 2

有各种各样的变化，但基本上你要做的是：

1. 开始，在文档中添加“div”（或根据您的网站的外观，添加到某个容器元素）
2. 运行一个AJAX事务来获取你的小弹出窗口的内容（如果它已隐藏在某个地方的页面上）
3. 给div适当的CSS你希望类属性以你想要的方式设置样式（重要的是，让它可见： - ）

弹出框应包含的内容是按钮或其他控件，以便将其删除。您可以使用jQuery offset（）函数查找单击的内容的页面位置，然后可以使用位置信息（左上角）来定位浮动元素。您的浮动元素应该以绝对定位定位，并且给定“z-index”值大于周围内容。

你究竟是如何做到的，这在很大程度上取决于你的网站是什么样的，其他内容是如何排列和定位的，以及你如何得到/综合弹出窗口的内容。