vue 移动端 弹框出现，背景禁止滑动

1- 由于弹框比较长，所以弹出的时候前面的弹框内容需要滑动，但是背景需要禁止滚动

2-所以使用watch 监听，弹窗出现禁止滚动，弹框消失可以滚动

`
//首先显示模态框

  // 教练详细信息分享卡片
    ShowCoachCard (res) {
      this.coachCard = true;
    }

然后监听，当模态框弹出的时候就控制

 watch: {
coachCard (newVal, oldVal) {
  if (newVal == true) {
    console.log('gaibian l ');

    let cssStr = "overflow-y: hidden; height: 100%;";
    document.getElementsByTagName('html')[0].style.cssText = cssStr;
    document.body.style.cssText = cssStr;
  } else {
    let cssStr = "overflow-y: auto; height: auto;";
    document.getElementsByTagName('html')[0].style.cssText = cssStr;
    document.body.style.cssText = cssStr;
  }

  // 下面需要这两行代码，兼容不同浏览器
  document.body.scrollTop = this.pageScrollYoffset;
  window.scroll(0, this.pageScrollYoffset);
}

},
`
这里的样式是，首先这个模态框一定要放在页面的最顶部

<div class="share-box " v-show=" coachCard ">

然后相对页面固定定位，宽度和高度和页面一样大

  // 成员分享
  .share-box {
    // 让他撑满浏览器  和浏览器一样大
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    // position: absolute;
    position: fixed;
    z-index: 10000;
    overflow: auto;
    /*border: red 1px solid;*/
    background: rgba(0, 0, 0, 0.4);
  }

贼长的弹框