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

Question

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

我怎样才能做到这一点？

Answer 1

您需要获取鼠标坐标并让您的脚本使用它们来定位弹出窗口。如果您正在使用jQuery，这可能有所帮助：

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

<强> --- --- EDIT

Here's a demo 您所追求的目标。

Answer 2

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

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

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