vue页面常用中间弹出一个窗口

大约类似dialog,弹出窗口只能对窗口内进行操作,其他的原来页面的不能操作

<template>
  <div
    class="shade"
    v-show="show"
  >
    <div class="vbox">
      <div class="dialog-panel">
        <div class="dialog-panel-top">
         
        </div>
        <div class="dialog-panel-content">
         
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: '',
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.init()
  },

  computed: {
  },

  watch: {
  },
  methods: {
    async init() {
    }
  }
}
</script>
  
  <style scoped>
.shade {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 998;
  /* background-color: rgba(0, 0, 0, 0.4); */
}
.vbox {
  background-color: transparent;
  z-index: 999;
  position: absolute;
  top: 250px;
  right: 450px;
  left: 450px;
  bottom: 200px;
}
.dialog-panel {
  background: #15191a;
  border-radius: 20px;
  border: 2px solid #2371b2;
  position: absolute;
  width: 100%;
  height: 100%;
}
.dialog-panel-top {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding: 0px 30px;
}
.dialog-panel-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 5px;
  padding: 0px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>