求助一个层的定位问题

一个后台页面，
内空页面是在一个iframe里面显示的。现在在内容页面，要加一个浮动层（显示一个等待的效果）。结果那一个层只覆盖了内容页框架的内容。我的要示是：覆盖整个页面，（也就是说，浮动层可以覆盖框架外的内容），我该怎么做。我想这样写了#load{padding:10px;
width:600px;height:300px;
display:block;
position: absolute;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-150px;}
</style><div id="load" style="display:none;"><img id="img_load" src=""></img></div>JS 是这样写的。 $("#load").css("display","block");
$("#img_load")[0].src='/data/images/img_load.gif';

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

jquery 直接用div 弹出插件.设置插件弹出的比例即可...不过我忘记了那插件名字了.嘿嘿
O(∩_∩)O哈哈~，我刚刚做了这个项目，给你点经验：jQuery 操作IFRAME DOM方法：父窗口操作其下的IFRAME：window.frames["iframeName"].document或者直接写frames["iframeName"].documentIFRAME操作父窗口: window.parent.document  或者直接写parent.document jquery方法:在父窗口中操作其下IFRAME中的元素： $(window.frames["iframeName"].document).find(”:text”);在IFRAME中操作选中父窗口中的所有输入框：$(window.parent.document).find(”:text”); 使用find可以找到自己想要的东东。想要找到同级的iframe，可以用$(parent.frames["iframeName"]).find("xxxxxx") 细心的朋友一下就能理解，原理其实很简单，就是用到了$(DOM对象)转换成jquery对象。例子：
<script type="text/javascript" src="javascript/jquery_1.4.2.js"></script>
<div id="ifr">
     <iframe id="iframe" name="showMap" width="100%" height="600" src="map.php"></iframe>
//map.php
<?php
include("mysql_mode_class.php");
header("content-type:text/html;charset:utf-8");
$mysql = new MySqlMode();
?>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<Meta http-equiv="Refresh" Content="30">
<script src="javascript/jquery_1.4.2.js"></script>

<style>body{margin:0 auto;}</style>
</head>
<body>
<div id="mapbox" style="float:left;position:absolute;overflow:hidden;width:1200px;height:1973px;z-index:1">
<img id="pic" style="position:relative;z-index:-1;" src="images/full.png" />
</div>
<script>
$(function(){
var being = true;
var checkSubmitFlg = false; <?php
/**右为x轴+方向，下为y轴+方向. ↓→
**添加多个标注时，会出现偏移 */
//坐标信息
$Infors = $mysql->selectCoords();
//交通局、保密局、政府、税务局
foreach($Infors as $m => $s){ ?>
var lx<?=$m?>   = <?=$s['x']?>;
var ly<?=$m?>   = <?=$s['y']?>;
var title<?=$m?>= "<?=$s['dept']?>";
var text<?=$m?> = "时间：<?=$s['date']?><br>设备名称：<?=$s['MAC']?>";
var url<?=$m?>  = "<br><a style='font-size:12px' href='javascript:void(0);' id='url<?=$m?>'>解除警报</a>"; //添加标注
$("#mapbox").append("<div style='float:left;padding:0;position:absolute;"+
"top:"+(ly<?=$m?>)+";left:"+(lx<?=$m?>)+";'>"+
"<img id='img<?=$m?>' src='images/.gif' /></div>"); //添加提示框
$("#img<?=$m?>").mouseover(function(){
if (being == true) {
$("#mapbox").append("<div id='img<?=$m.$m?>' style='float:left;background:url(images/border.png) no-repeat;"+
"width:300px;height:150;padding:10px;margin:0; position:absolute;z-index:-1;"+
"top:"+(ly<?=$m?>-120)+";left:"+(lx<?=$m?>-20)+";'>"+title<?=$m?>+
"<button style='background:url(images/exit.png) no-repeat;width:17px;height:17px;position:relative;top:-2px;'"+
"name='close' title='关闭' id='btnClose<?=$m?>' />"+
"<br>"+text<?=$m?>+url<?=$m?>+"</div>");
}
being = false;
}); //关闭提示框
$("#btnClose<?=$m?>").live("click",function () {
            being=true;
            $("#img<?=$m.$m?>").remove();
}); //防止页面刷新
$("#url<?=$m?>").live("click",function () {
      if (checkSubmitFlg == true) {
         checkSubmitFlg = false;
         return;
      }
        checkSubmitFlg = true;
location.href="removeAlarm.php?cloDept=<?=$s['dept']?>&cloUnit=<?=$s['unit']?>";
return;
    }); //显示三维图像
$("#img<?=$m?>").click(function(){
if('<?=$s['c3d']?>' != ''){
$(window.parent.document).find("#iframe").css({'display':'none','visibility':'hidden'});
$(window.parent.document).find("#show3dmap").append("<div id='3d<?=$m?>'"+
"style='background:url(images/xiCheng<?=$s['c3d']?>.jpg) no-repeat; width=1200px;height:600px;"+
"padding:0;margin:0;position:relative;z-index:2;top:-2145;left:0;'>"+
"<span style='background:#FFFFFF;line-height:20px;'>"+title<?=$m?>+
"<button style='background:url(images/exit.png) no-repeat;width:17px;height:17px;position:relative;top:-2px;'"+
"name='close' title='关闭' id='3d<?=$m.$m?>' /></span></div>");
}else{
alert("该单位暂无三维图像");
}
}); //关闭三维图像
$(window.parent.document).find("#3d<?=$m.$m?>").live("click",function () {
$(window.parent.document).find("#iframe").css({'display':'block','visibility':'visible'});
            $(window.parent.document).find("#3d<?=$m?>").remove();
}); <?php } ?>
});
</script>
</body></html>
这样可能好理解：<script type="text/javascript" src="javascript/jquery_1.4.2.js"></script>
<body>
<div id="show3dmap">此div的宽高与body相当
  <div id="ifr">
    <iframe id="iframe" name="show" width="100%" height="600" src="cont.php"></iframe>
  </div>
</div>
</body>
//cont.php
<script>
  $(window.parent.document).find("#iframe").css({'display':'none','visibility':'hidden'});
  $(window.parent.document).find("#show3dmap").append("<div id='div' style='width:1200px;height:1000px;'>这里的宽和高是含iframe的父级页面的宽和高，即当前浏览器的可视窗口大小(自定义)<br>可定义按钮来关闭此div:<button id='btn' value='关闭' /></div>");//close
$(window.parent.document).find("#btn").live("click",function () {
$(window.parent.document).find("#iframe").css({'display':'block','visibility':'visible'});
            $(window.parent.document).find("#div").remove();
});
</script>
好吧，我承认是着急了点，还是把上面的帖子移除吧，这是个可测试的：
在iframe的父级页面和元素页面必须都连接上<script type="text/javascript" src="jquery_1.4.2.js"></script> 才管用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery_1.4.2.js"></script>
</head><body>
<div id="show3dmap" style="border:solid 1px">此div的宽高与body相当
  <div id="ifr">
    <iframe id="iframe" name="show" width="100%" height="600" src="cont.html"></iframe>
  </div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery_1.4.2.js"></script>
</head><body>
<div>这是子页面
<input type="button" id="full" value="点击覆盖" />
<input type="button" id="replace" value="点击替换父级div" />
</div>
<script>
$("#replace").live("click",function(){
  $(window.parent.document).find("#iframe").css({'display':'none','visibility':'hidden'});
  $(window.parent.document).find("#show3dmap").html("<div id='rep' style='width:1200px;height:1000px;z-index:2;'>"+
   "这里替换内容</div>");
});
$("#full").live("click",function(){
  //$(window.parent.document).find("#iframe").css({'display':'none','visibility':'hidden'});
  $(window.parent.document).find("#show3dmap").css({'display':'none','visibility':'hidden'});
  $(window.parent.document).find("body").append("<div id='div' style='border:solid 1px;width:1200px;height:1000px;z-index:2;'>"+
   "这里的宽和高是含iframe的父级页面的宽和高，即当前浏览器的可视窗口大小(自定义)<br>可定义按钮来关闭此div:<input type='button' id='btn' value='关闭' /></div>");
});
//close
$(window.parent.document).find("#btn").live("click",function () {
            //$(window.parent.document).find("#iframe").css({'display':'block','visibility':'visible'});
$(window.parent.document).find("#show3dmap").css({'display':'block','visibility':'visible'});
            $(window.parent.document).find("#div").remove();
        });
</script>
</body>
</html>