Ich habe ein Bild auf meine HTML-Seite geladen und möchte ein Popover von Twitter Bootstrap über die Mausklickposition öffnen. Was ich bisher gemacht habe, ist das Popover auf der Seite des Bildes zu öffnen. Aber was ich wirklich tun möchte, ist das Popover zu öffnen, wo immer ich auf das Bild geklickt habe.So öffnen Sie ein Popover am Mausklick
Wie kann ich das erreichen?
Sie müssen die Mauskoordinaten abrufen und Ihr Skript verwenden, um das Popover beim Klicken zu positionieren. Wenn Sie jQuery verwenden könnte dies helfen:
$('#yourimage').click(function(){
$('#popover').css('left', pageX-(popover width)+'px');
$('#popover').css('top', pageY-(popover height)+'px');
})
--- EDIT ---
Here's a demo von dem, was Sie nach.
Außerdem müssen Sie 'position: absolute' auf' # popover' setzen. – otinanai
position: absolute ist bereits in der bootstrap css-Datei eingestellt und muss nicht in den neuen Styles neu gesetzt werden, da die Positionselemente nur die in der späteren – Shail
erwähnten zurücksetzen Ich hatte kein Bild von deinem CSS, also war ich gerade stellen Sie sicher, dass Sie es richtig einstellen. – otinanai
die .popover Klasse Schreiben Versuchen über durch die Koordinaten Ihrer Wahl
.popover {
top: 20px !important;/*put your position */
left: 20px !important;/*put your position*/
}
einfach die Positionselemente Zurücksetzen werden alle anderen Arten intakt in der Haupt bootstrap.css halten.
Ja, aber wie kann ich das tun, abhängig von der Mausklickposition? Ich sollte diesen Code in eine .js-Datei setzen –
Sie müssen diesen Code in CSS-Datei setzen. – Shail
Was haben Sie bisher versucht? Jeder Beispielcode hilft anderen, Ihr Problem zu lösen. – shabeer90