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

How to open a popover on the mouse click location

本文关键字:窗口 位置 鼠标      更新时间:2023-09-26

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

我怎样才能做到这一点?

您需要获取鼠标坐标,并让脚本在单击时使用它们来定位弹出窗口。如果你正在使用jQuery,这可能会有所帮助:

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

---编辑---

下面是您想要的东西的演示

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

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

只要重新设置位置元素,就可以在主引导程序中保持所有其他样式不变