iframe中的模态框遮罩如何盖住父级？

Question

1.后台系统中用了iframe来布局，iframe中的页面使用了模态框，但是遮罩只能盖住iframe本身，并不能覆盖父级页面，如下图：

2.百度一下，说可以在父级页面做遮罩层，然后在iframe页面里调用，结果父级页面的遮罩挡住了iframe页面中的模态框，如下图：

3.父级遮罩代码如下：

<!--HTML代码 遮罩层 -->
<div id="mask"></div>

/*CSS代码 遮罩层*/
#mask {width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:1;opacity:0.3;
    /*兼容IE8及以下版本浏览器*/
    filter: alpha(opacity=30);display:none;}

/*JS代码 遮罩层*/
function showmask(){
    var s = document.getElementById("mask");
    s.style.display = "block";
}

function closemask(){
    var s = document.getElementById("mask");
    s.style.display = "none";
}

4.我还试过一种方法，就是将模态框直接写在父级页面里，然后iframe子页面中调用父级方法，这个方法的确是可以解决盖住父级页面的问题，但是，我在模态框中要输入表单到后台php页面更新数据库，成功后刷新页面，一旦刷新页面，iframe中的页面就会占据整个页面成为父级，如下图:

5.本人是初学者，望各位大神提供下思路，被这个问题苦恼了好几天了。。。万分感谢

Answer 1

第4的方法是正解，唯一要解决你的问题。

如果说你的表单提交是AJAX的话，这个问题好解决，只需要在 success 的时候手动再去刷新相应 iframe 就行了。

Answer 2

同为菜鸟遇到过类似问题，我的做法是中间弹窗和遮罩，然后通过frame的层级关系找到头部和左边栏加上遮罩，不知道是否还有更好方法。