popup-position ändern, wenn nach unten scrollen
Ich habe ein popup-div, die Karte auf dem klicken einer ein Bild möchte ich zeigen, das div-Element auf der angeklickten Stelle. Nun, das funktioniert nur, wenn die Seite in der default-position, dass nicht gescrollt werden oder nicht gezoomt. wenn gescrollt oder gezoomt dann ist die position des popup ändern.
Den normalen popup -
das ist ok.
Wenn ich jetzt scrollen Sie nach unten und klicken Sie auf tht-Gang image(Einstellungen). es ist wie dieser.
finden Sie tht Seite gescrollt ist und das problem. Der andere ist, wenn ich ihn zu vergrößern. Wenn gezoomt wie seine:
mein js ist:
$('.settings img').live('click', function (event) {
$('.set_pop').css('left',event.pageX);
$('.set_pop').css('top',event.pageY);
$('.set_pop').css('display','inline');
$(".set_pop").css("position", "fixed");
$(".set_pop").show();
});
mein css: und die Blaue(header) seiner position fixiert
.settings{
float:right;
margin-right: 3%;
border: none;
margin-top: 5px;
cursor: pointer;
}
.set_pop{
position:absolute;
margin-right: 50px;
margin-top:10px;
width:100px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
z-index:10;
background-color: #ffffff;
color:#000;
}
html
<div class="settings">
<img src="images/setting.png" alt="settings" width="30px" height="30px"/>
<div class="set_pop">
<ul class="strip">
<li onclick="location.href='register'">Manage Users</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
sorry für die Buchung alles, eigentlich bin ich nt in der Lage, das problem, ich habe versucht, verschiedene Skripte und wechselt die Positionen. Jemand hier könnte mir helfen, hoffe ich.
Dank & Grüße
- versuchen Sie es mit der css-Elemente
top
undright
um die position des popup-stattmargin
. weiterhin würde ich vorschlagen, mitposition:relative
und legen Sie die dropdown-Liste im/nach dem Knopf (und nur verstecken)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ändern Sie Ihre Klasse zu diesem :
}
Was ich getan habe ist, ich habe die position: absolute; zu position: fixed; und fügte hinzu, "oben" und "rechts" positionieren Sie es richtig. Sie können ändern Sie die oben/rechts entsprechend.
Absolute angezeigt wird, relativ zu dem Dokument (ODER wenn in einem anderen
element ist relativ zu dem element, solange es nicht statisch ist)
Relativ ist relativ zu dem Dokument positioniert werden kann, mit dem
oben unten Links & rechts-Eigenschaften und scrollt mit der Seite
Behoben angezeigt wird, fest an das browser-Fenster und sind daher nicht
Blättern aber bewegt sich, wenn Ihr die Größe des Fensters
Für eine ausführliche Erklärung klicken Sie hier