预实现的功能:在iframe层的Js中控制父级css样式,以实现覆盖整个页面的弹层遮罩。
父级HTML 内容
<div id="main-shade">
<p>提交中,请稍后...</p>
</div>
父级 CSS样式
#main-shade{
display: none;
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100%;
z-index: 999;
background: rgba(0,0,0,0.4);
}
#main-shade p{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 40px;
line-height: 40px;
margin: -50px 0 0 -20px;
font-size: 20px;
text-align: center;
background: blue;
}
问题:在iframe中的js无法直接通过id或类名控制父级样式
解决办法:
利用搜索工具搜索到如下解决办法
1.获取iframe 的父级id 为mask的内容。
$('#main-shade',window.parent.document);
2.控制iframe 父级 id为mask绑定事件
$('#main-shade',window.parent.document).on('click', function(){
...//事件
});
3.设置iframe 父级id为.mask 设置css样式
$('#main-shade',window.parent.document).css("display","block");