Question

我正在制作我的电子档案袋，我有一个弹出框。这是为了使整个屏幕背后变暗，直到向下滚动为止。我不确定你们是否知道gyazo，但这里是我的意思的gif。（如果你不想点击它，那就好了。） https://gyazo.com/0513512615ee2e0dd169db12a222a06b

好的，这里是HTML代码

<div id="View_Code_Car" class="overlay">
    <div class="Popup">
        <h2>'Car' - Processing Project Code</h2>
        <a class="close" href="#">×</a>
        <div class="Content">
            <img src = "Images/View_Code_Car.png" <img/>
        </div>
    </div>
</div>

和CSS

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 350ms;
    visibility: hidden;
    opacity: 0;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}

弹出的代码更多，但它不能控制不透明度或任何

Answer 1

您可能需要将模态叠加设置为position: fixed;，使其粘贴到窗口。 position: absolute;将自身引用到设置为“position：relative;”的最近的父容器。

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 350ms;
    visibility: hidden;
    opacity: 0;
    z-index: 9999999;
}

您仍然可以滚动页面，但模式将保持固定在窗口中。

CSS：设置整个页面的不透明度

1 个答案: