彈出div的位置在滾動上改變
[英]The position of pop up div changes over scroll
問題描述
我想在單擊頁面的位置彈出一個div。 所以我有以下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>
js是：
$("#popupButton").live('click', function (e) {
leftVal = e.pageX + "px";
topVal = e.pageY + "px";
$('#popupFilterDiv').css({ left: leftVal, top: topVal }).show();
});
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;
}
現在，一切正常，除了當我更改Web瀏覽器的寬度時，彈出div遠離popupButton，並且彈出div的形狀也發生了變化。
我所期望的是
而當我更改網絡瀏覽器的寬度時，它會變得混亂。
1 個解決方案
解決方案1
0 2013-05-13 03:16:23
它可能不是很優雅，但是您可以給.popupFilterDiv類一個固定的寬度：
.popupFilterDiv
{
/*other relevant styles*/
position: absolute;
width: 50px; /* set a fixed width */
top: 0px;
left: 0px;
}
傾斜位置彈出div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.