twitter-bootstrap 如何在鼠标点击位置打开弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14982224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open a popover on the mouse click location
提问by Felipe Mosso
I have loaded an image on my HTML page and I'd like to open a popover from Twitter Bootstrap right over the mouse click position. What I have done so far is to open the popover on the side of the image. But what I really want to do is to open the popover wherever I've clicked on the image.
我已经在我的 HTML 页面上加载了一个图像，我想在鼠标单击位置的正上方从 Twitter Bootstrap 打开一个弹出窗口。到目前为止我所做的是打开图像侧面的弹出框。但我真正想做的是在我点击图像的任何地方打开弹出窗口。
How can I achieve this?
我怎样才能做到这一点？
回答by otinanai
You need to get the mouse coordinates and make your script use them to position the popover on click. If you're using jQuery this might help:
您需要获取鼠标坐标并让您的脚本使用它们在单击时定位弹出框。如果您使用 jQuery，这可能会有所帮助：
$('#yourimage').click(function(){
$('#popover').css('left', pageX-(popover width)+'px');
$('#popover').css('top', pageY-(popover height)+'px');
})
---EDIT---
- -编辑 - -
Here's a demoof what you're after.
回答by Shail
Try over writing the .popover class by using the co-ordinates of your choice
尝试使用您选择的坐标重写 .popover 类
.popover {
top: 20px !important;/*put your position */
left: 20px !important;/*put your position*/
}
Just resetting the position elements will keep all other styles intact in the main bootstrap.css.
只需重置位置元素将保持主 bootstrap.css 中的所有其他样式完整。
