对于跨框架弹出层这个问题，相信很多的朋友都遇到过，本人也是研究了很久，小有成就，在此与大家分享一下。首先要感谢“ ”这位网友，本人的成就是基于在他的基础上的。要看原文请点击 ， 本人在此不再详述。
首先看效果预览图： 画红边框的代表是三个iframe框架
首先建一个主页面：Index.html，在这个页面中搭好框架。代码如下：
<div id="popupmenu" style="display:none">
<div id="div2" class="alpha">
<iframe allowtransparency="true" src="index_show.html" scrolling="auto" width="520px" height="420px" frameborder="0"></iframe>
</div>
</div>
<div id="top" style="z-index:1">
<iframe src="index_top.html" scrolling="no" height="63" width="100%" frameborder="0"></iframe>
</div>
<div id="bottom" style="z-index:1">
<iframe id="left_menu" src="index_menu.html" scrolling="no" width="176" frameborder="0"></iframe>
<iframe id="right_body" src="index_body.html" scrolling="auto" frameborder="0"></iframe>
</div>
<script type="text/javascript">
function autoSize() {
var maxWidth = Math.max(
document.documentElement["clientWidth"],
document.body["scrollWidth"], document.documentElement["scrollWidth"],
document.body["offsetWidth"], document.documentElement["offsetWidth"]
);
document.getElementById("left_menu").style.height = (document.documentElement["clientHeight"] - 63) + 'px';
document.getElementById("right_body").style.width = (maxWidth - 180) + 'px';
document.getElementById("right_body").style.height = (document.documentElement["clientHeight"] - 63) + 'px';
}
function showPop() {
document.getElementById("popupmenu").style.display = 'block';
//弹出层居于屏幕中间
var adv = document.getElementById("div2");
adv.style.left = (this.screen.width - parseInt(adv.offsetHeight)) / 2 + "px";
adv.style.top = (this.screen.height - parseInt(adv.offsetWidth)) / 2 + "px";
}
function closePop() { document.getElementById("popupmenu").style.display = 'none'; }
autoSize();
window.onresize = autoSize;
</script>
然后分别再建4个页面： index_top.html、 index_menu.html、 index_body.html，这三个页面分别是顶部页面、左边导航页面和主要内容页面。 index_show.html页面就是要弹出的层。
index_top.html页面html代码：
<div id="topnav">
<h1>顶部界面 by shen</h1>
<ul id="main_nav">
<li><a href="#" οnclick="parent.window.showPop();return false;">点击我有惊喜</a></li>
</ul>
</div>
index_menu.html 页面html代码：
<div id="menu">
<dl>
<dt>这里是导航标题</dt>
<dd>
<ul>
<li><a href="#">这里是导航菜单</a></li>
<li><a href="#">这里是导航菜单</a></li>
<li><a href="#">这里是导航菜单</a></li>
<li><a href="#">这里是导航菜单</a></li>
<li><a href="#">这里是导航菜单</a></li>
</ul>
</dd>
</dl>
</div>
index_body.html
<div class="item">
<h3>这里是标题</h3>
<div class="content">
<p>追求自我，不断超越</p>
</div>
</div>
index_show.html页面html代码：
<div style="float:right; width:30px; height:30px; margin-bottom:-15px; margin-left:5px; border:0px solid #000000">
<img src="p_w_picpaths/fancy_close.png" width="30" height="30" οnclick="parent.window.closePop()" />
</div>
<div style="clear:both"></div>
<div style="width:500px; background-color:#FFFFFF">
<div style="height:370px; width:490px;">这个是跨框架弹出层哦</div>
</div>
再说一点：在每个html页面都要引入dd.css样式文件。大家可以下载附件源码来查看效果和更改成自己需要的版本。本人使用的微软的VS2010编码工具。