Javascript 模态弹出窗口

Question

我正在尝试创建一个简单的模态弹出窗口。我已经完成了 CSS，并且大部分 Javascript 已经完成。我正处于单击页面按钮处的按钮并出现弹出窗口的位置，但它出现在页面顶部。如果您一直滚动到页面顶部，它看起来应该如何。

但是我希望模式弹出框根据当前滚动位置显示在中心。我还希望它在我滚动时保持居中。截至目前，它不会漂浮在屏幕中央。

滚动时需要使用什么 javascript 属性来调整弹出 div 的位置。

我试过了，但没有用:

function showModal(id)
{
   window.onscroll = function () { document.getElementById(divID).style.top =
                                               window.pageYOffset || 
                                               document.body.scrollTop || 
                                               document.documentElement.scrollTop; };
   document.getElementById(id).style.display = "block";
   document.getElementById(id).style.top =
                 window.pageYOffset || 
                 document.body.scrollTop || 
                 document.documentElement.scrollTop; };
}

我使用的是纯 vanilla javascript，没有 jQuery。

TL;DR:我创建了一个模态弹出窗口，但当我从页面顶部滚动时，它不会保持居中。

Answer 1

为你的 css 尝试 position: fixed，它不会滚动，同时检查 display HTML page after loading complete

例子:

<style>
#floater    {float:left; height:50%; margin-bottom:-1px;}
#top        {position: fixed; top:0; left: 0; width: 100%; height: 100%; background: #fff}
#content    {clear:both; height:540px; position:relative; height: 100%; width: 100%;}
</style>
<div id="top">
    <div id="floater"></div>
    <div id="content">
        <div style="border: 1px solid #DDD; padding: 10px; background: #BBB; width: 300px; margin: 0 auto">Popup Contents Here</div>
    </div>
</top>

• #top 元素隐藏背景，你可以让它透明但仍然不可点击。
• #floater 和 #content 用于 vertical centering .