javascript - The position of pop up div changes over scroll -


i want pop div on position click page. have following 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> 

the js is:

$("#popupbutton").live('click', function (e) {     leftval = e.pagex + "px";     topval = e.pagey + "px";     $('#popupfilterdiv').css({ left: leftval, top: topval }).show(); }); 

and css is:

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

now, works except that, when change width of web browser, pop div lies far away popupbutton, , shape of pop div changed.

what expected

enter image description here

while when change width of web browser, becomes disordered.

enter image description here

it may not elegant, give .popupfilterdiv class fixed width:

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

Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -