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

Posted 2023-03-27

【中文标题】如何在鼠标单击位置打开弹出框

【英文标题】：How to open a popover on the mouse click location

【发布时间】：2013-02-05 14:15:50

【问题描述】：

我已经在我的 html 页面上加载了一个图像，我想在鼠标单击位置上从 Twitter Bootstrap 打开一个弹出窗口。 到目前为止，我所做的是打开图像侧面的弹出框。但我真正想做的是在我点击图像的任何地方打开弹出框。

我怎样才能做到这一点？

【问题讨论】：

到目前为止你尝试过什么？任何示例代码都将帮助其他人回答您的问题。

【参考方案1】：

您需要获取鼠标坐标并让您的脚本使用它们在单击时定位弹出框。如果您使用的是 jQuery，这可能会有所帮助：

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

---编辑---

Here's a demo 你所追求的。

【讨论】：

另外，您需要将position:absolute 设置为您的#popover。

position:absolute 已经在主引导 css 文件中设置，不需要在新样式中再次设置，因为位置元素只会重置后面提到的那些

我没有你的 CSS 的图片，所以我只是确保你设置正确。

@SE_User 记住条件语句if (stageWidth - left < theWidth)，您可以调整每种情况的定位规则，例如滚动时、高度不适合窗口时等。逻辑很漂亮简单的。试试看……

哦，好的。感谢您的提醒！ @otinanai :)

【参考方案2】：

使用您选择的坐标尝试重写 .popover 类

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

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

【讨论】：

是的，但是根据鼠标点击的位置，我该怎么做呢？我应该把这段代码放在一个 .js 文件中