如何让iframe中弹出的层显示在整个网页上

在工作中，我们经常遇到需要在iframe中弹出div层并让它显示在整个页面上方的情况。这里我们可以通过在iframe页面添加js脚本来实现，在父窗体中动态创建一个div，并将其显示在最顶层。

创建文件夹和文件

首先，在文件夹中创建两个文件：一个是iframe页面，另一个是父页面index。

引入iframe页面

然后打开父页面index，在其中引入iframe页面。

在iframe页面添加按钮

接下来，在iframe页面中添加一个按钮，该按钮用于触发弹出div层的操作。

修改iframe页面

在浏览器中打开index页面，此时页面上只有一个在iframe中的按钮。

现在我们对iframe页面进行修改，在按钮上添加onclick事件调用"show"方法。通过"show"方法，在父页面的body中动态创建一个div层并显示出来。需要注意的是，将这个层的style中的position属性设置为"absolute"，并设置z-index足够大的值，使其能够显示在顶层。

function show() {
    var showdiv  ('div');
    ('id', 'topdiv');
    ('style', 'position:absolute;z-index:999;width:300px;height:300px;');
    var tt  ('我是iframe弹出层');
    (showdiv).appendChild(tt);
}

查看效果

现在我们再次在浏览器中打开index页面，然后点击iframe页面中的按钮"弹出层"，就会弹出一个蓝色的div层，并且位于父页面内容之上显示。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。