弹窗样式

2020-02-04  本文已影响0人  前端浅语
<div size="large" class="share" @click="showPop()">分享给关心的人</div>
<div class="popup" v-show="isShowPopup" @touchmove.prevent>
   <div class="mask" @click="close"/>
     <div class="popup_cont center">
       <!--弹窗的内容-->
       <img src="" alt="" class="tipimg">
      </div>
 </div>
 .popup {
   .mask {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1000;
      background-color: rgba(0, 0, 0, 0.7);
      overflow-y: hidden;
    }
    .popup_cont {
      box-sizing: border-box;
      position: fixed;
      z-index: 1001;
      width: 80%;
      opacity: 1;
      &.center{
        top: 20%;
        left: 50%;
        transform: translate(-45%, -50%)!important;
      }
      .tipimg {
        width: 100%;
        height: 30%;
      }
    }
  }
close() {
  this.isShowPopup = false
},
showPop() {
  console.log('wertyuio')
  this.isShowPopup = true
}
上一篇 下一篇

猜你喜欢

热点阅读