弹出div的位置改变滚动

我想弹出一个div只是在我点击页面的位置。所以我有以下的HTML。弹出div的位置改变滚动

<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的形状也发生了变化。

我的预期是什么

enter image description here

而当我改变网页浏览器的宽度，它变得无序。

enter image description here

来源

2013-05-13 Edison

你应该得到弥补您的按钮的位置，并显示弹出，并在窗口重新调整大小时也调用此函数 – Tarun 2013-05-13 03:12:23

+1用于发布所有相关信息 – SomeShinyObject 2013-05-13 03:15:17

它可能不是很优雅，但你可以给你的.popupFilterDiv类固定宽度：因此

.popupFilterDiv 
{ 
    /*other relevant styles*/ 
    position: absolute; 
    width: 50px; /* set a fixed width */ 
    top: 0px; 
    left: 0px; 
}

来源

2013-05-13 03:16:23 SomeShinyObject

弹出div的位置改变滚动

回答

相关问题