页面弹窗功能如（点击去注册，页面弹出注册的页面只是占据一部分页面）

<div id="app">

    <transition enter-active-class="animated fadeIn">

      <div class="chang" v-if="show">

        <div class="changshi">

          <h2>静夜思</h2>

          <p>床前明月光，</p>

          <p>疑似地上霜。</p>

          <p>举头望明月，</p>

          <p>低头思故乡。</p>

          <div class="del" @click="del">X</div>

        </div>

      </div>

    </transition>

 <button class="tan" @click="btnClick">点击弹窗</button>

           

  </div>

.chang{

  justify-content: center;

  width: 100%;

  height: 100%;

  position: fixed;

  background: rgba(119, 138, 91, 0.6);

  /* transition: all 0.2s linear; */

  z-index: 999;

}

.changshi{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: #FFF;

  opacity: 1;

  padding: 20px;

  z-index: 1000;

  border-radius: 5px;

}

.tan{

  margin-left: 50%;

  width: 100px;

  text-align: center;

  transform: translateX(-50%);

}

.del{

  font-size: 32px;

  font-weight: 500;

  opacity: 0.8;

  width: 50px;

  height: 50px;

  margin-top: 30px;

  line-height: 50px;

  margin-left: 20px;

  text-align: center;

  border: 1px solid rgb(179, 158, 158);

  border-radius: 50%;

}

 

 注意：这里引用了vue的过渡属性，要引入animate.css才能过渡，有可能引发版本冲突。不要安装最新的。