本文实例为大家分享了微信小程序实现弹出层效果的具体代码，供大家参考，具体内容如下

先看下效果图吧

其实这个效果实现起来很简单，就是通过三目运算符来控制遮罩层的显示和隐藏

贴代码了：

规则按钮：

text class=' rule ' bind tap=' showRule '规则/text遮罩层：我这个数据是从后台拿来动态渲染到页面的

！-规则提示-view class='统治赵哲{ { isreletrue '？isruleshow ' : ' isruleshide ' } ' view class=' ruleZhezhaoContent ' view class=' ruleZhezhaoText ' wx : for=' { { rule } } ' wx : for-index=' index ' text { { index 1 } }/text text { { item } }/text/view image src='././图像/规则隐藏。png ' class=' rule hide ' bind tap=' HideRule '/image/view/view！- end - css:

/* 规则提示层*/.isRuleShow { display:块；}.isRuleHide { display: none}。统治赵哲{身高： 100%；宽度： 100%;位置：固定；背景-color:rgba(0，0，0，5);z-index : 2；top : 0；左： 0；}.ruleszhajaocontent { padd : 20 rpx 0；宽度： 80%;背景技术# e1d2b1margin: 40%自动；边界半径： 20 rpx显示： flex flex-方向：柱；证明内容：空间环绕；align-items:居中；相对位置：}.ruleszhaotext { width : 80%；font-size : 30 rpxcolor : # 856 D5 fdisplay : flex flex-direction : row；align-items:居中；margin: 25rpx 0 25rpx 0}。ruleZhezhaoText text : th-child(1){ color : # fff；font-size : 40 rpx高度： 60rpx宽度： 60 rpx背景技术# 664a2cdisplay:块；文本对齐：中心；线高： 60 rpx边界半径： 30 rpx右边距： 10 rpx}.ruleZhezhaoText text : th-child(2){ flex-wrap : wrap；宽度： 80%;}.规则隐藏{ height: 60rpx！重要；宽度： 60rpx！重要；绝对位置：top :-20 rpx；右：-20 rpx；}.规则{显示：块；border: 1px实心# fff宽度： 100 rpx文本对齐：中心；线高： 60 rpxcolor : # fffh three : 60 rpx font-size : 30 rpx；边界半径： 30 rpx绝对位置：前：名10%；右：5%；}/* end */点击规则按钮：

//打开规则提示showRule:函数(){这个。setdata({ isreletrue : true })}，点击关闭按钮：

//关闭规则提示隐藏规则：函数(){这个。setdata({ isreletrue : false })}，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。