Verstecktes Popup-Div macht Probleme

Promaetheus

Mitglied
Ich habe einen langen Text bei dem durch Klick auf spezifische Wörter ein DIV unter dem Wort erscheinen soll. Durch Klick in das Div wird es wieder geschlossen. Das habe ich soweit schon umgesetzt und funktioniert auch, jedoch erscheint das DIV, sofern das Wort irgendwo mittem im Text steht leider immer am linken Rand der Seite und nicht unterhalb des Wortes. Wo habe ich denn hier den Fehler drin? Ich probiere schon seit Stunden.

Die Funktion expand setzt "display:none" auf "display:block" und umgekehrt.

HTML:
<font class="linkWiki" onclick="expand('Test')" style="cursor: pointer">Test</font>  <div class="input popupWiki" style="width: 250px; padding: 5px; position: absolute; z-index:2; display: none; cursor: pointer" id="Test" onclick="expand('Test')"><img src="close.gif" border="0">&nbsp;<b>Test</b><br>Das ist der aufklappende Text des Wortes Test.</div>
 
Du hast zwar die CSS-Position auf Absolut gesetzt, aber es gibt keine Angabe, wo die Box absolut sein sollte. Daher wird sie meines Erachtens automatisch an den Rand gesetzt.

Eine gute Möglichkeit die Box während der Laufzeit zu platzieren besteht darin, die Mausposition des Klicks zu erfragen und die left- und top-Angabe der Box dann darauf zu ändern.

Deine Funktion expand bekäme dann den Parameter e und beim onclick-Event wird 'this' übergeben. In der Funktion expand bekommst du dann über e.PageX den left-Wert und über e.PageY den top-Wert. Diese weißt du dann als CSS-Eigenschaft deiner Info-Box zu und setzt wie gehabt display auf block.

Ich hoffe, dass ich dir damit weiterhelfen kann.
 

Neue Beiträge

Zurück