我该如何定位：绝对;对话框最初出现在视口内，无论页面滚动到哪里？

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.

我希望每次显示时都在视口内显示一个对话框div而不使用position:fixed;。基本上,当单击下面示例中的“显示”按钮时,我希望对话框出现在其位置固定的位置,但我希望它的位置是绝对的。或者,在略有不同的文字中,我“......希望它被定位为好像已经固定,然后在放置后立即停止修复。” (感谢apsillers)我希望它是位置:绝对;所以我仍然可以在浏览器中滚动它,但我仍然希望它在最初显示时出现在视口中。

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.

我在这里,这里和这里尝试了很多不同的CSS,但似乎没有一个能满足我的要求。请注意,我不能使用JQuery或其他JS库。

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

3 个解决方案

#1

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)

(如果您需要旧的IE支持,请使用document.attachEvent()添加相同的处理程序)

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

但我不建议这样做。使用位置:如果可能,则固定。

#2

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.

并把它放在任何容器div之外,所以它只在html和body元素中。

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

添加此css html,body {position:relative; height:100%}

and that should be you golden.

这应该是你的金色。

#3

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

你需要使用position:fixed而不是absolute或relative。

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

position:fixed表示元素相对于浏览器窗口的位置。

EDIT

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

没意识到你说你不想这样做,请解释原因。

#1