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