微信小程序中自定义一个盖满全屏的弹窗(遮罩层)

608 阅读1分钟
<view class="login-view">
        <view class="login-button">
                <button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="phone_num">获取手机号</button>
                <button type="default" @click="login_user.show = false">取消</button>
        </view>
</view>
<style scoped lang="scss">
	.login-view {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 999;
		animation: post-list-row .3s;
	}

	@keyframes post-list-row {
		0% {
			top: 100%
		}

		100% {
			top: 0
		}
	}

	.login-button {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.login-view button {
		margin: 70rpx;
		width: 400rpx;
	}
</style>