uniapp 仿写弹窗

页面

复制代码
<template>
	<view @click="close" class="mask">
		<view @click.stop="onClick" class="content">
			<text class="text">点击蒙层关闭</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: "点击蒙层关闭"
				})
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			},
			close() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.content {
		width: 200px;
		height: 200px;
		background-color: #007AFF;
	}

	.text {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		line-height: 200px;
		text-align: center;
		color: #FFFFFF;
	}
</style>

manifest.json 配置

复制代码
	{
		"path": "pages/popup/popup",
		"style": {
			"navigationStyle": "custom",
			"backgroundColor": "transparent",
			"app-plus": {
				"animationType": "fade-in",
				"background": "transparent",
				"popGesture": "none"
			}
		}
	}

预期效果

相关推荐
Bellafu66618 分钟前
selenium 常用xpath写法
前端·selenium·测试工具
2501_915921433 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友5 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构