关于js与遮罩层的思路

如果是最简单粗暴的方法

就是获取所有元素z-index的值,取最大值

只需要忽略z-index为auto(继承父元素值)或者为null的情况

 

生成当前window窗口最大的遮罩

 

如果存在有zindex不生效的情况,请参考

https://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html

 

 

另一个,如果是存在多级弹框视图,如何更加友好的遮罩效果

在一个最大的父视图中,弹出一个子维护功能的视图,同时生成一个父视图的遮罩层,但低于子视图:意思是在子视图的显示过程中,父视图不可操作,或者是为避免在子视图操作过程中误操作父视图

同时,子视图的大小一般是小于父视图的,如果能做的根据当前操作视图的大小生成同样大小的遮罩层,是一种用户交互反馈的更明确化的体验

所有,如果需要做html视图遮罩层的控制,至少要形成视图区域的概念,因为这样方便获取当前图层

你可能感兴趣的:(dev,html)