弹框后面的页面让他不能滚动弹窗内容能滚动

弹框后面的页面让他不能滚动弹窗内容能滚动

<!-- 弹框 -->
    <div class="popup" ref="popup" v-if="modalInfo">
      <div class="popup_con">
        <img @click="popdown()" src="../../assets/imgs/about/close.png" alt />
        <div class="popup_word" v-html="word"></div>
      </div>
    </div>

//css
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left:0;
  background: rgba(0, 0, 0, 0.8);
  // display: flex;
  // justify-content: center;
  // align-items: center;
  z-index: 99998;
  // opacity: 0;
  .popup_con {
    position: absolute;
    width: 8rem;
    height: 70%;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color: #f8f8f8;
    box-shadow: 0rem 0.027rem 0.027rem 0rem rgba(0, 0, 0, 0.5);
    padding: 0.787rem 0.74rem 0.787rem 0.74rem;
    box-sizing: border-box;
   
    z-index: 99999;
    img {
      width: 0.7rem;
      height: 0.7rem;
      position: absolute;
      top: 0px;
      right: 0px;
    }
    .popup_word {
      width: 100%;
      height: 100%;
      overflow: scroll;
    }
  }
}



//js
data(){
	return{
	//弹出框
      modalInfo: false,
	}
},
methods: {
	popup() {
	      this.modalInfo = true;
	      $("html,body").addClass("overHiden");
	      // 阻止浏览器的冒泡
	      window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
	    },
	    //弹框关闭
	    popdown() {
	      this.modalInfo = false;
	      $("html,body").removeClass("overHiden");
	      // 阻止浏览器的冒泡
	      window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
	    }
}



//在app.vue里面写样式
.overHiden {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}