小程序——遮罩层（自定义弹出框）的实现

一、参考资料

参考资料1：微信小程序——自定义个性化模态框（附代码）
参考资料2：小程序自定义modal弹窗封装实现

二、效果展示

小程序本身提供了wx.showModal的弹窗方式，但只局限于用户有两个选择的点击（比如说两个按钮时确定和取消），我们在多种信息的展示和选择的时候可以采用自定义弹窗的方式，效果如下：

这种自定义弹窗在点击叉号时可以关闭弹出框，可以在弹出框内进行checkbox的选择以及文字的输入，唯一的缺点是点击旁边的灰色区域不会关闭弹出框

三、代码实例

附上xml js css代码
xml：

<view class="substitution_65" bindtap="findprodq"><text>出现问题？</text>
</view>
 //这部分相当于绑定了弹出内容层的事件
 
<view class="content" hidden="{{flag}}" >
	<view class="findprodq_100"  >
	//这里面填入你想显示的内容 是整个内容层部分
			<view class="findprodq_101" bindtap="closeprodq">
				<text class="iconfont iconclosepro" style='float:right'></text>
			</view>
	</view>
</view>

js：

 data:{
     flag: true, //弹出层显示与否
     disabled: true, //是否可用
 }
 
  findprodq: function () {
    this.setData({ 
      flag: false
    });
  },
  
  closeprodq: function() {
    this.setData({
      flag: true,
      disabled: true,
    })
  },

wxss:

.content{
height:100%; 
width:100%;
position:fixed;
top:0px;
background:rgba(0,0,0,0.4);
overflow: hidden;
}

 .findprodq_100{
width:600rpx;
position: fixed;
height:760rpx;
clear:both;
float:left;
text-align:left;
margin-left:76rpx;
border-radius: 16rpx;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.09);
margin-top: 200rpx;  
background: #fff;
}

 .findprodq_100 .findprodq_101{
width:57rpx;
height:57rpx;
margin-top:18rpx;
margin-left:517rpx;
float:left;
position: absolute;
text-align:left; 
}

内容层：弹出框部分
遮罩层：灰色的背景部分
相当于先做一个灰色的背景覆盖整个屏幕，然后再做一个白色的内容框

xml中的关键部分为：<view class="content" hidden="{{flag}}" > 这部分的flag标签设定的是整个内容层+遮罩层的显示与否 就是点击“出现问题？”后现在界面的全部

wxss中的关键部分是.content的设置，如果想覆盖全屏height:100%;width:100%;背景一定要设置透明度background:rgba(0,0,0,0.4);

js中绑定事件的不同来控制data中flag的值，进而控制弹出框的显示与否

四、结语

欢迎大家在评论讨论代码或者指出bug，会编辑修正，谢谢