WeChat applet pop-up layer click penetration problem

 

Problem description: When using the modal component of the applet to achieve the effect of the mask layer, there will be a problem of scroll penetration, that is, the page behind the mask layer can still be scrolled.

solution:

　　Dynamically add position:fixed; to the underlying page

 

Code:

wxml：

<modal class="mask" wx:if="{{hasMask}}" bindtap='hideMask'>
    I am the mask layer
</modal>
<view style="background-color:#ccc;height:2000rpx{{hasMask?'position:fixed;':''}}width:100%;>
    Small program pop-up layer click penetration problem
    <button bindtap='showMask'>Pop up the mask layer</button>
</view>

js：

Page({

  data: {
    hasMask:false
  },

  showMask(e) {
    // show mask
    this.setData({
      hasMask: true
    })
  },
  hideMask (e) {
    // hide the mask
    this.setData({
      hasMask: false
    })
  }
}）

　　

Effect picture: