项目功能点：【主项目使用iframe引入其它项目】弹窗与遮罩问题优化

问题描述

在使用iframe时，子页面的弹框遮罩只能覆盖子页面，而无法扩展到父页面，

解决思路

1.当子页面需要弹框时，父页面也弹出遮罩层，使得整个页面能够遮罩，【需要父子通信】
2.然后将子页面样式做定位，设置层级，使之高于父页面遮罩层级，
3.此时子页面正常弹窗（带遮罩），两个遮罩共同实现全部遮罩的效果

思路答疑

为啥要将子页面设置层级提高？

这里涉及到 z-index的知识点，z-index的值并不是一定越大越靠前。
首先：只有当元素的position为：relative,absolute,fixed等脱离了文档流的定位时，z-index才会生效。
在同一父元素内部，z-index值越大越靠前。当且仅当某一元素z-index大于其他兄弟元素，此元素的子元素才能遮盖此元素的兄弟元素
在不同父元素中，元素优先比较同级父元素的z-index。

所以：父子遮罩的z-index 不能做比较，要将子页面的z-index 高于父页面遮罩层的z-index。

666