Question

我想在我点击页面的位置弹出一个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的形状也发生了变化。

我的期望

enter image description here

当我改变网络浏览器的宽度时，它会变得混乱。

enter image description here

Answer 1

它可能不是很优雅，但你可以给你的.popupFilterDiv班级一个固定的宽度：

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

弹出div的位置会改变滚动

1 个答案: