css3 模态框从底部弹出_css点击按钮从底部浮出框

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>
1
2
3
4
5
6
7
8

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;}

1
2
3
4
5
6

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)
			}
		}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19