ページをクリックした位置に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ブラウザの幅を変更すると乱れます。