弹窗样式
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
}