遮罩以及滚动穿透

源码速览

• 全屏
  源码
• 遮罩toast
  在以上代码基础上，将遮罩容器的宽高缩小即可。

考虑因素

• 全屏

.wrap {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  background: rgba(0,0,0.0.6);
}

• 垂直居中

  • 内部元素已知宽高，高:myHeight

  .content {
    position: absolute;
    top: 50%;
    margin-top: -myHeight/2;
    left: 0;
  }
  

  • 内部元素未知高度：

  flex方案

  .wrap {
        position: fixed;
        z-index: 20141248100;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
  

• 防止穿透(底层滚动)，保持滚动位置

  这篇文章讲解比较详细 移动端滚动穿透问题完美解决方案