工作中遇到要在iframe里弹出div层显示在整个页面上面,这种情况我们可以泶颛预鹨通过在iframe页面添加js脚本,动态给父窗体创建一个div,然后设置让其显示在最顶层这样就可以了。
方法/步骤
1、在文件夹中创建两个文件,一个iframe页面,一个父页面index。
2、打开父页面index,里面引入iframe页面。
3、打开iframe页面,里面添加一个按钮。
4、在浏览器中打开index,页面是这样的,一个按钮在iframe中。
5、现螅岔出礤在我们对iframe做修改,在button上监听onclick调用“show”方法,通过show动态在父页面body中创建一个div层并显示出来,把这个层style中的posi墉掠载牿tion:absolute,z-index设置足够大就会显示在顶层。functionshow(){varshowdiv=document.createElement('div');showdiv.setAttribute('id','topdiv');showdiv.setAttribute("style",'position:absolute;z-index:999;width:300px;height:300px;');vartt=document.createTextNode('我是iframe弹出层');window.parent.document.body.appendChild(showdiv).appendChild(tt);}
6、现在我们在浏览器中再次打开index页面,点击iframe页面的中的按钮“弹出层”,就会弹出一个蓝色的div层,在父页面内容之上显示出来。