如何在鼠标单击位置打开弹出窗口

Question

我已经在我的HTML页面上加载了一张图片，我想从Twitter Bootstrap打开一个弹出框，正好位于鼠标点击位置。目前为止，我已经成功在图像的一侧打开了弹出框。但是我真正想做的是在我点击图片的任何位置打开弹出框。如何实现这一点呢？

- Felipe Mosso

---

你目前尝试了什么？任何样例代码都可以帮助其他人回答你的问题。 - shabeer90

Answer 1

你需要获取鼠标坐标，并使用它们来定位弹出窗口的位置。如果你正在使用jQuery，这可能会有所帮助:

$('#yourimage').click(function(){
      $('#popover').css('left', pageX-(popover width)+'px');
      $('#popover').css('top', pageY-(popover height)+'px');
})

---编辑---

这是您所需要的演示。

- otinanai

---

我正在尝试按照您的建议操作，但弹出框位置没有改变。我已经在我的js文件中添加了以下代码： $('.ImgMapa').click(function(){ $('.popover').css('left', '275px'); $('.popover').css('top', '275px'); $('.ImgMapa').popover('show'); });我只是为了测试使用了275px，但它并没有起作用。我可能错在哪里了？ - Felipe Mosso

@otinanai 有没有办法动态定位弹出框？例如，在您的fiddle中，如果您单击最右侧部分，弹出框会被截断，在这种情况下，是否可以将弹出框显示在左侧？（是否有自动执行此类功能的方法） - SE_User

非常接近了！除了使用PopperJS插件，还有没有其他完美的方法可以做到这一点？ - SE_User

@SE_User 考虑到条件语句 if (stageWidth - left < theWidth)，您可以根据每种情况（如滚动、高度不适合窗口等）调整定位规则。逻辑非常简单。试试看吧... - otinanai

好的，谢谢你提醒我！@otinanai :) - SE_User

Answer 2

尝试通过使用您选择的坐标来覆盖.popover类

.popover {
top: 20px !important;/*put your position */
left: 20px !important;/*put your position*/
}

只需重置位置元素，即可保持主要的bootstrap.css中的所有其他样式不变。

- Shail

---

是的，但我如何根据鼠标点击位置来实现它？我应该将这段代码放在一个 .js 文件中。 - Felipe Mosso