css3 模态框从底部弹出
程序员文章站
2022-05-31 15:59:01
...
1.vue
<!--弹出框-->
<div class="popup">
<div class="mask" v-show="shareType"></div>
<div class="share" :style="{bottom: num + 'px'}">
<div class="share-opt bg-color"></div>
<div class="btn bg-color" @click="cancel">取消</div>
</div>
</div>
2.css
/*弹出框*/
.mask{position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0,0,0,0.5);z-index: 99;}
.share{width: calc(100% - 20px);height: 273px;position: fixed;left: 10px;z-index: 100;transition: bottom .5s ease-in;}
.share .share-opt{width: 100%;height: 210px;border-radius: 8px;}
.share .btn{width: 100%;height: 40px;line-height: 40px;text-align: center;border-radius: 20px;color: #333333;font-size: 14px;border: none;margin-top: 10px;}
3 .js
export default{
name: 'mine',
data() {
return{
shareType:false,
num: -273
}
},
methods: {
share: function() {
this.shareType = true;
this.num = 0
},
cancel: function() {
this.num = -273;
setTimeout(()=>{this.shareType = false;},600)
}
}
}