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。

Answer 2

模态弹出，OnClose弹出事件等等！

https://github.com/reduardo7/xpopup

Javascript模态弹出窗口

2 个答案: