VUX Popup组件的Mask遮罩如何确保始终位于最上层？

本文共计491个文字，预计阅读时间需要2分钟。

问题描述：在iOS设备上，遮挡层显示在弹出内容上方，导致弹出内容无法正常显示和响应点击事件。

解决方案：找到该Popup组件的祖先DOM节点，检查是否设置了CSS属性-webkit-overflow-scrolling: touch。如果设置了，将其移除或修改为auto。

问题描述：

在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 遮罩在最上层的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。