[英]popup position changing if scroll down
我有一个弹出式div,点击一个图像显示,我想在点击的地方显示div。 现在只有在页面处于默认位置时才有效,但不会滚动或不缩放。 如果滚动或缩放,则弹出窗口的位置会发生变化。
正常的弹出窗口
没关系。
现在,当我向下滚动页面并单击齿轮图像(设置)时。 就像这样。
请看页面滚动和问题。 另一个是当我缩放它。 如果放大它的喜欢:
我的js是:
$('.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();
});
我的css:和蓝色(标题)它的位置是固定的
.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>
抱歉发布一切,实际上我能够解决问题,我尝试了各种脚本并更改了所有位置。 我希望,有人可以帮助我。
感谢和问候
将您的班级更改为:
.set_pop {
background-color: #FFFFFF;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 2px 3px #666666;
color: #000000;
margin-right: 50px;
margin-top: 10px;
position: fixed;
width: 100px;
z-index: 10;
top: 40px;
z-index: 10;
}
我做的是,我改变了立场:绝对; 定位:固定; 并添加“顶部”和“右侧”以正确定位。 您可以相应地更改顶部/右侧。
相对于文档显示绝对值(如果另一个元素内部相对于该元素,则为OR,只要它不是静态的)
相对于文档相对,但可以使用左上角和右下角属性定位,并随页面滚动
固定显示固定在浏览器窗口,因此如果您调整窗口大小,则不会滚动但会移动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.