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

在文件夹中创建两个文件，一个iframe页面，一个父页面index。

打开父页面index，里面引入iframe页面。

打开iframe页面，里面添加一个按钮。

在浏览器中打开index，页面是这样的，一个按钮在iframe中。

现在我们对iframe做修改，在button上监听onclick调用“show”方法，通过show动态在父页面body中创建一个div层并显示出来，把这个层style中的position:absolute，z-index设置足够大就会显示在顶层。

function show() {

         var showdiv=document.createElement('div');

         showdiv.setAttribute('id','topdiv');

         showdiv.setAttribute("style",'position:absolute;z-index:999;width:300px;height:300px;');

         var tt=document.createTextNode('我是iframe弹出层');

         window.parent.document.body.appendChild(showdiv).appendChild(tt);

}

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