最终效果

我使用的vue的js做绑定处理。虽然现在各种 弹窗插件到处都是，但是本着造轮子的本心还是写了一点。这段内容是17年的时候写的。时间跨度稍微有点大。表在意了。

基本思路：

1：为需要添加遮罩的页面添加一个组件，这个组件绑定在isShow参数上，

2：写这个组件，此组件为遮罩背景，在这个组件上再添加一个组件，绑定在curtainName上使得组件内容可以随名称变更改变。之后再写一个新的组件，此组件为遮罩上层弹出，在这个组件上面写出新的弹出页面内容（当然，如果不公用的话，那么直接写在遮罩里面也是可以的，没必要在写一个）

3：为各个页面添加点击事件，更改isShow和curtainName的属性，显示出遮罩和弹出界面
 

代码

1 将要被遮罩的页面添加遮罩

<template v-if="curtainObject.isShow">
   <component v-bind:is="'curtain'" transition="bounce"
   transition-mode="out-in"></component>
</template>

 

showBtn:function () {
   curtainObject.isShow = true;
   curtainObject.contentName = "edit";
}

2遮罩页面（遮罩弹窗的css撑满屏幕）

 <template>
      <div id="curtain" class="curtain">
         <component v-bind:is="contentName" transition="bounce" transition-mode="out-in">
         </component>
      </div>
 </template>
<script>
import edit from "./Edit.vue"
export default {
   data() {
      return curtainObject;
   },
   methods: {

   },
   components:{
      "edit":edit
   }
   
};
</script>
<style>

.curtain {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0,0,0, 0.8);

   z-index: 1000;
   transition: all .3s ease-in-out;
}
</style>

 

 

3：弹出界面

<template class="div-middle">
    <div>
       <div class="editTitle">
       <label>修改</label>
        </div>
     </div>
</template>

<script>
export default {
   data() {
      return curtainObject;
   },
   methods: {
   cancelBtn: function () {
      curtainObject.isShow = false;
   },
   editAccountSaveBtn: function () {

      }
   },
}
</script>

<style>

</style>