弹出div的位置在滚动上改变
[英]The position of pop up div changes over scroll
问题描述
I want to pop up a div just on the position where I click the page. 
我想在单击页面的位置弹出一个div。 So I have the following HTML. 所以我有以下HTML。
<HTML>
<body>
<button id="popupButton"> click </button>
<div id="popupFilterDiv" class="popupFilterDiv" style="display:none;">
<input type="checkbox" name="statusFilter" value="Active" /> Active <br />
<input type="checkbox" name="statusFilter" value="Expired" /> Expired <br />
</div>
</body>
</HTML>
the js is: js是：
$("#popupButton").live('click', function (e) {
leftVal = e.pageX + "px";
topVal = e.pageY + "px";
$('#popupFilterDiv').css({ left: leftVal, top: topVal }).show();
});
and css is: CSS是：
.popupFilterDiv
{
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 10px;
position: absolute;
text-align:left;
z-index:50;
padding: 15px 15px 5px;
top: 0px;
left: 0px;
}
Now, everything works well except that, when I change the width of the web browser, the pop up div lies far away from the popupButton, and the shape of the pop up div also changed. 现在，一切正常，除了当我更改Web浏览器的宽度时，弹出div远离popupButton，并且弹出div的形状也发生了变化。
What I expected is 我所期望的是
while when I change the width of the web browser, it becomes disordered. 而当我更改网络浏览器的宽度时，它会变得混乱。
1 个解决方案
解决方案1
0 2013-05-13 03:16:23
It may not be very elegant, but you could give your .popupFilterDiv class a fixed width: 它可能不是很优雅，但是您可以给.popupFilterDiv类一个固定的宽度：
.popupFilterDiv
{
/*other relevant styles*/
position: absolute;
width: 50px; /* set a fixed width */
top: 0px;
left: 0px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.