Question

我试图在屏幕中间设置一个弹出式div，它不适用于所有情况。

我有一个列表，其中列代表每日小时和行无线电频道，所以让我们假设在当前视口中只有10个无线电频道可以适合，每当用户点击某个频道时，弹出窗口会显示一些信息。

到目前为止一切正常，弹出窗口是我想要的中心，但如果我向下滚动例如通道（行）20-30等...然后点击，弹出窗口不会出现在屏幕的中央，但正好在它首次出现的地方......

我认为总是向上滚动以查看信息是很烦人的，有没有办法修复此div以始终显示在屏幕中间而不管滚动（行位置）？

这是Div css：

#DescriptionDiv{
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    padding: 16px;
    border: 3px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}


#TableWrapper{
     width : 900px;
     height: 600px;
} // the Parent Div of the listing



<div id="TableWrapper" >
    <div id="DescriptionDiv">
        <span id="DescClose"><i class="fa fa-times"></i></span>
        <h6 id="DesTitle"></h6>
        <span id="Time"></span>
        <div id="Desc"></div>
    </div>
</div>

由于

Answer 1

更改

position: absolute;

要

position: fixed;

固定定位将使其不与其他内容一起滚动。 [MDN]

CSS - 即使页面滚动时中心弹出窗口也在中间

1 个答案: