彈出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的位置改變滾動

回答

相關問題