iframe获取父级标签及控制父级样式

预实现的功能：在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");