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

Question

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

我怎样才能做到这一点？

Answer 1

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

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

- -编辑 - -

这是您所追求的演示。

Answer 2

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

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

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