对于跨框架弹出层这个问题，相信很多的朋友都遇到过，本人也是研究了很久，小有成就，在此与大家分享一下。首先要感谢“ ZH CEXO ”这位网友，本人的成就是基于在他的基础上的。要看原文请点击 http://www.zhcexo.com/how-to-put-div-over-frame/， 本人在此不再详述。
    首先看效果预览图： 画红边框的代表是三个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页面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编码工具。