uniapp遮罩层实现以及禁止页面滚动

在页面上添加遮罩层，效果图如下：

弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动，给当前遮罩层添加catchtouchmove="true"便可。不过在电脑上调试是无效，因为这是触摸事件，需要在手机端测试，预览生成开发版，用手机微信扫描即可看到效果。
代码：

<view class="popup-bg" catchtouchmove="true"></view>
<view class="popup-cont ">
    <view>用户服务协议</view>
</view>
css:
.popup-bg{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      background-color: rgba(1,1,1,0.3);
}
.popup-cont{
      width: 80%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 12rpx;
      background-color: #ffffff;
}