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;
}

これで、Web ブラウザーの幅を変更すると、ポップアップ div が popupButton から離れて配置され、ポップアップ div の形状も変更されたことを除いて、すべてが正常に機能します。

私が期待したのは

ここに画像の説明を入力

Webブラウザの幅を変更すると乱れます。

ここに画像の説明を入力

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 に答える