如何使子页面的弹出框无法覆盖父页面的遮罩层答案

【问题标题】：How to make a pop-up box in child page can't cover the mask layer in parent page如何使子页面的弹出框无法覆盖父页面的遮罩层
【发布时间】：2014-02-24 15:37:25
【问题描述】：

这是我的情况：a.html有一个iframe，而iframe的src是b.html。

b.html 中有一个按钮。按下后，父页面（a.html）会弹出一个遮罩层。同时，子页面（b.html）会弹出一个框。但是，事实证明，框（z-index:2）被父页面（z-index:1）中的遮罩层覆盖。能解决吗？

我希望盒子可以覆盖遮罩层，盒子必须在b.html中，图层必须在a.html中。等待您的帮助。

【问题讨论】：

你能给我们看一些代码吗？

标签： javascript jquery html css iframe

【解决方案1】：

a.html的主要代码如下：

<body>
    <iframe src="b.html"></iframe>
    <div id="masklayer" style="z-index:1000;display:none;">
    </div>
</body>

b.html的主要代码如下：

<body>
    <button onclick="showbox();">Show Box</button>
    <div id="contentbox" style="z-index:1001;display:none;">
    </div>
</body>

<script type="javasript/text">
    function showbox() {
        $("#masklayer", window.parent.document).css("display", "block");
        $("#contentbox").css("display", "block");
    }
</script>

PS：我只是给出了主要的css属性。

【讨论】：