css3 模态框从底部弹出

最新推荐文章于 2023-12-07 17:13:25 发布

HXH_csdn

最新推荐文章于 2023-12-07 17:13:25 发布

阅读量4.7k

点赞数 1

文章标签： css3 模态框从底部弹出

本文链接：https://blog.csdn.net/HXH_csdn/article/details/103178483

版权

在这里插入图片描述
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)
			}
		}
}