以下为弹窗组件代码

先创建一个组件

HTML部分

<view @click.stop="onClick" class="content">
 <text class="text">点击蒙层关闭</text>
 </view>

JavaScript部分

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

			}
		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: "点击蒙层关闭"
				})
				
			},
			close() {
				uni.navigateBack()
			}
		}
	}
</script>

css部分

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

这里已经大致完成了，其他的业务根据自己需求来编写就行，但是这还是无法做到全局弹窗的效果，往下看，我们可以在pages.json文件稍微配置一下

pages.json

            "style": {
			
			"backgroundColor": "transparent",
			"app-plus": {
				"animationType": "fade-in",//页面进入效果
				"background": "transparent",//透明背景
				"popGesture": "none"
			}
		}

我们只需要用 uni.navigateTo({url: '你注册页面的地址'})，就能得到全局弹窗的效果，本质上其实是跳转页面，原理就是利用透明背景去进行视觉上的弹窗效果

哟西哟西，这样就能得到一个自定义全局弹窗了，快去试试吧！！

注意：仅支持APP端！！仅支持APP端！！仅支持APP端！！