关于css遮罩层可以滚动的问题

Question

写了一个css遮罩，也就是类似 bootstrap中弹窗的效果

<div class="alert-container">
    <div class="alert-content">这里是弹窗内容</div>
</div>

将alert-container的css设定为

position: fixed;
background: rgba(0,0,0,0.70);
top: 0;
bottom: 0;
left: 0;
right: 0;

可是背景之下的内容可以滚动，不知道如何解决这个下面部分可以滚动的问题

不知道有没有不使用js的办法

Answer 1

1. 打开遮罩的时候给 body设置 overflow;
2. $('body').css("overflow","hidden")

Answer 2

遮罩层弹出的时候, 给 body 设置 height: 浏览器可视区高度; 并设置 body: overflow:hidden; 溢出隐藏; 这样就不能滚动了, 遮罩层关闭时body之前设置的样式移除;