欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3 模态框从底部弹出

程序员文章站 2022-05-31 15:59:01
...

css3 模态框从底部弹出
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)
			}
		}
}