滚动后始终显示模态框答案

【问题标题】：Have modal always appear in view after scroll滚动后始终显示模态框
【发布时间】：2022-08-11 07:35:31
【问题描述】：

我遇到了一个问题，如果用户向下滚动我的网站然后弹出模式，它总是会在页面顶部弹出，因此需要他们一直向上滚动才能进行交互。

有没有办法让模态框即使滚动也总是在视图中弹出？

.modal 创建背景阴影，然后 modal-content 是模态内容出现的地方。

先感谢您。

.modal {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.3);
}

.modal-content {
    background-color: #f4f4f4;
    margin: 15% auto;
    padding: 20px;
    width: 70%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.17), 0 7px 20px 0 rgba(0,0,0,0.17)
}

模态打开时设置body { overflow-y: hidden }

标签： html css

【解决方案1】：

在您的 .modal 类上使用 position: fixed。使用fixed 属性会将元素附加到屏幕，而不是相对于它的容器。

【讨论】：