問題描述：

在IOS裝置上遮罩層顯示在彈出內容的上面，導致彈出內容不能正常顯示內容和響應點選事件

解決方案：

找到該Popup元件的祖先DOM節點是否被設定該CSS屬性：-webkit-overflow-scrolling: touch;

若被設定將該CSS屬性，則去掉即可。

補充知識：完美解決VUX的popup元件滑動穿透的問題

最近使用vux的popup元件做個彈窗，在真機中使用發現存在滑動穿透的問題，即在彈出窗滑動內容，底層的內容也會跟著滑動，這種體驗很不好。

廢話不多說，直接上解決方法：

核心就是給根div新增固定定位。

具體實現如下：

<template>
 <div id='discounts' :class="{'fixed-touch':showDetail}">
    <button @click="showDetail=true">彈出popup元件</button>
   // 遮罩層
    <div class="overlayer" @touchmove.prevent v-show="showDetail" @click="showDetail=false"></div>
   // 這裡注意下，要把popup元件的遮罩顯示設定為false
    <popup v-model="showDetail" position="bottom" max-height="80%" should-rerender-on-show :show-mask="false">
      <div class="popup-style">彈出框內容</div>
    </popup>
  </div>
</template>

<script>
import { Popup } from 'vux'
export default {
 data () {
  return {
    showDetail: false
    }
  },components: {
  Popup
 }
}
</script>

<style>
.fixed-touch {position: fixed;}
.overlayer{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 500;
  background-color: #000;
  opacity: .5;
 }
</style>　

按照如上方式便可完美解決vux的popup元件在移動端滑動穿透的問題。

以上這篇解決vux 中popup 元件Mask 遮罩在最上層的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。