小程序实现毛玻璃的效果

利用css的filter这个属性实现，在有弹框弹出的时候背景出现高斯模糊的效果

写个小例子记录一下，这个是背景是地图的情况下，做的处理，不管是文字还是图片什么的，在弹出框出来的时候给背景添加filter:blur(20rpx)中间值的模糊程度。
wxml部分 给地图用一个标签包着，直接添加到地图上也可以，但是为了更好的控制地图的样式，我就用了一个标签包着地图，放在了地图的盒子上一样的效果，为了展示方便样式就写在了行内，不推荐

点击遮罩

wxss部分

.shadow{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
z-index: 200;
}

js部分

//显示遮罩
click:function(){
console.log(‘点击遮罩’)
this.setData({

   blur: 20+'rpx',
   shadowShow: true
 })
 wx.showModal({
   title: '提示',
   content: '确认取消吗',
 })

},
//隐藏遮罩
hiddenShow:function(){
this.setData({
shadowShow:false,
blur: 0 + ‘rpx’,
})
},