在做后台管理页面的时候,经常用到iframe.虽说这东西有些过时,也不利于SEO,但是后台就是后台,不需要考虑那么多东西,综合来说,用iframe还是很适合后台管理界面的.
但是在遇到弹出层时,出现了问题.由于页面是由三个html文件拼合而成的,所以每个分页面的弹出层,只能存在于自己的页面中,无法做到遮盖所有的分页面.
我在这里学到的第一种方法就是利用DIV包装Iframe的方法.可以解决这个问题.
下面是总的框架页面布局:
1 <style> 2 #popupmenu{position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;display:none;} 3 </style> 4 <div id="popupmenu"> 5 <iframe allowtransparency="true" src="mask.html" scrolling="auto" width="100%" height="100%" frameborder="0"></iframe> 6 </div> 7 <div id="top" style="z-index:1"> 8 <iframe src="top.html" scrolling="no" height="63" width="100%" frameborder="0"></iframe> 9 </div> 10 <div id="bottom" style="z-index:1"> 11 <iframe id="left_menu" src="left.html" scrolling="no" width="176" frameborder="0"></iframe> 12 <iframe id="right_body" src="right.html" scrolling="auto" frameborder="0"></iframe> 13 </div> 14 <script type="text/javascript"> 15 function showPop(){ 16 document.getElementById("popupmenu").style.display = 'block'; 17 } 18 function closePop(){ 19 document.getElementById("popupmenu").style.display = 'none'; 20 } 21 </script>
下面是分页面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body style="background: green;"> 8 9 <a href="#" onclick="parent.window.showPop();return false;">点击弹出</a> 10 </body> 11 </html>
因为其他的页面中我并没有写任何东西,所以就不贴代码了.
关键就在于a的click事件.
parent.window意思就是父框架的window对象,去执行它的showPop方法.
但是,我感觉这并不是最好的解决办法.记录一下,希望大家有更好的建议.