0

我想在单击页面的位置弹出一个 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;
}

现在，一切正常，除了当我更改网络浏览器的宽度时，弹出 div 离 popupButton 很远，并且弹出 div 的形状也发生了变化。

我所期望的是

在此处输入图像描述

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

在此处输入图像描述

4

1 回答 1

0

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

.popupFilterDiv
{
    /*other relevant styles*/
    position: absolute;
    width: 50px; /* set a fixed width */
    top: 0px;
    left: 0px;
}
于 2013-05-13T03:16:23.147 回答