2

I would like to make a dialog div appear within the viewport every time it is shown without using position: fixed;. Essentially when the Show buttons in the below example are clicked, I want the dialog to appear where it would if its position were fixed, but I want its position to be absolute. Or, in slightly different words, I "... want it to be positioned as if it were fixed, and then stop being fixed immediately after placement." (Thanks apsillers) I want it to be position: absolute; so that I can still scroll past it in the browser, but I still want it to appear in the viewport when it is initially shown.

I've tried a lot of different CSS from here, here, and here, but none seemed to fulfill my requirements. Note that I cannot use JQuery or other JS libraries.

.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>
stiemannkj1
  • 4,418
  • 3
  • 25
  • 45
  • have you tried using the `` element yet only chrome and opera support it: – Edwin Reynoso May 11 '15 at 14:47
  • 3
    I'm curious as to the reason for this question.. I feel like asking for it to "appear where it would if it's position were fixed, but I want it's position to be absolute" is kind of like asking for a way for text to appear green, even though it is set to `color: blue;`. Why does it need to be `absolute`? – Blake Mann May 11 '15 at 14:50
  • 1
    Wait, so you want it to be positioned *as if it were fixed*, and then *stop being fixed* immediately after placement, correct? – apsillers May 11 '15 at 14:54

3 Answers3

3

You can use absolute positioned dialog with 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 also the same handler using document.attachEvent() in case you need old IE support)

But I wouldn't recommend this way. Use position:fixed if it is possible.

kreig
  • 990
  • 11
  • 18
  • Nice answer! For my specific example, I only need to run this code in the `onclick` of any buttons showing the dialog. I'm not sure, but it may be worth editing the example to reflect that. – stiemannkj1 May 11 '15 at 15:25
0

Take <div id="dialog" class="dialog" style="display:none;">Dialog</div>

and put it outside of any container divs so its only within the html & body elements.

add this css html,body{position:relative;height:100%}

and that should be you golden.

-1

You need to use position:fixed instead of absolute or relative.

position:fixed means the element is positioned relative to the browser window.

EDIT

Didn't realise you said you DON'T want to do this, please explain why.

Josh Stevenson
  • 895
  • 5
  • 17