话不多说上代码。

wxml:

view class='page '按钮bindtap='showMask '弹出/button view catch touch move=' preventTouchMove ' class=' alert-mask ' wx : if=' { { show modal } } '/view view class=' modaldllg ' wx : if=' { { show modal } } ' view class=' model title '我是标题/view view class='modeContent '我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容/view image class=' hide-BTN ' bind tap=' hide mask ' src=' http :/./images/tripdetailalertide。png '/图像/视图/视图

wxss:

/* 弹窗蒙版开始*/。警报屏蔽{宽度： 100%；高度： 100%;位置：固定；top : 0；左： 0；背景技术： # 000;z指数： 9000；opacity: 0.7 }。modalDlg {宽度： 80%；高度： 55%;位置：固定；前：名45%；左：-1%；z指数： 9999；盒子尺寸：边框盒子；padd : 25 rpxmargin :-370 rpx 85 rpx；背景-color : # fff；边界半径： 18 rpx显示： flex flex-方向：柱；align-items:居中；}.模型标题{ font-size : 38 rpx保证金-底部： 20 rpx}.hide-BTN {位置：绝对；top: 10rpxright: 10rpx宽度： 50 rpx高度： 50 rpx}

/* 弹窗蒙版end */js : page({ data : { show modal : false }，onLoad(o) { }，show mask : function(){ this。setdata({ show modal : true })}，hide mask : function(){ this。setdata({ show modal : false })}，})

总结

以上所述是小编给大家介绍的微信小程序实现蒙版弹出窗功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！