javascript - How can I make a postion: absolute; dialog initially appear within the viewport no matter where the page is scrolled? -

i make dialog div appear within viewport every time shown without using position: fixed;. when show buttons in below example clicked, want dialog appear if position fixed, want position absolute. or, in different words, "... want positioned as if fixed, , stop being fixed after placement." (thanks apsillers) want position: absolute; can still scroll past in browser, still want appear in viewport when shown.

i've tried lot of different css here, here, , here, none seemed fulfill requirements. feel free answer question using javascript and/or css and/or yui 3.0 and/or alloyui 2.0, not jquery.

.dialog {    position: absolute;  }

<div>    <div id="dialog" class="dialog" style="display:none;">dialog</div>    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <button onclick="document.getelementbyid('dialog').style.display=null;">show</button>    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <button onclick="document.getelementbyid('dialog').style.display=null;">show</button>    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <button onclick="document.getelementbyid('dialog').style.display=null;">show</button>    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <button onclick="document.getelementbyid('dialog').style.display=null;">show</button>  </div>

you can use absolute positioned dialog scroll position tracking.

document.addeventlistener('scroll', function(){      var body = document.body;      var top = body.scrolltop || body.parentelement.scrolltop;      document.getelementbyid('#yourpoupup').style.top = top + 'px'; }); 

(add same handler using document.attachevent() in case need old ie support)

but wouldn't recommend way. use position:fixed if possible.