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

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

我该如何做到这一点？

来源

2013-02-20 Felipe Mosso

到目前为止您尝试过什么？任何示例代码都可以帮助他人回答你的问题。 – shabeer90 2013-02-20 14:28:11

您需要获取鼠标坐标并让脚本使用它们来定位弹出单击。如果你正在使用jQuery这可能帮助：

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

---编辑---

Here's a demo的你以后。

来源

2013-02-20 14:39:58 otinanai

另外，你需要为'＃popover'设置'position：absolute'。 – otinanai 2013-02-20 14:42:29

位置：absolute已经在主引导程序的css文件中设置，不需要再次设置新的样式，因为位置元素只会重置后面提到的那些 – Shail 2013-02-20 14:53:27

我没有CSS的图片，所以我只是确保你设置正确。 – otinanai 2013-02-20 14:55:47

-3

尝试过使用您所选择的坐标

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

刚刚复位的位置元素将保留所有其他样式不变的主bootstrap.css写.popover类。

来源

2013-02-20 14:39:13 Shail

是的，但我怎样才能做到这一点取决于鼠标点击的位置？我应该把这个代码放在一个.js文件中 – 2013-02-20 23:28:16

你必须把这段代码放在css文件中。 – Shail 2013-02-21 01:22:07

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

回答

相关问题