使模态始终显示在滚动后的视图中

Question

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

有没有办法让模态始终弹出在视图中，即使它们滚动？

.modal创建背景阴影，然后模态内容就是模态内容出现的位置。

提前谢谢。

.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)
}

Answer 1

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