Maison  >  Article  >  développement back-end  >  一个层的定位有关问题

一个层的定位有关问题

WBOY
WBOYoriginal
2016-06-13 13:37:49867parcourir

求助一个层的定位问题
一个后台页面,
内空页面是在一个iframe里面显示的。

现在在内容页面,要加一个浮动层(显示一个等待的效果)。

结果那一个层只覆盖了内容页框架的内容。

我的要示是:覆盖整个页面,(也就是说,浮动层可以覆盖框架外的内容),

我该怎么做。

我想这样写了

CSS code
<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->

#load{padding:10px;
 width:600px;height:300px;
 display:block; 
 position: absolute;
 top:50%;
 left:50%;
 margin-left:-300px;
 margin-top:-150px;}







JS 是这样写的。

$("#load").css("display","block");
$("#img_load")[0].src='/data/images/img_load.gif';




------解决方案--------------------
jquery 直接用div 弹出插件.设置 插件弹出的比例即可...不过 我忘记了那插件名字了.嘿嘿
------解决方案--------------------
jqModal
------解决方案--------------------
O(∩_∩)O哈哈~,我刚刚做了这个项目,给你点经验:

jQuery 操作IFRAME 

DOM方法:

父窗口操作其下的IFRAME:window.frames["iframeName"].document

或者直接写frames["iframeName"].document

IFRAME操作父窗口: 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对象。

例子:
HTML code

<!--index.php-->
<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>
<br><font color="#e78608">------解决方案--------------------</font><br>你们要是真心的帮助LZ,那么就请贴出可供测试的代码<br>否则,我就要将此贴移动了
<br><font color="#e78608">------解决方案--------------------</font><br>好吧,我承认是着急了点,还是把上面的帖子移除吧,这是个可测试的:<br>在iframe的父级页面和元素页面必须都连接上<script type="text/javascript" src="jquery_1.4.2.js"></script> 才管用<br><dl class="code">HTML code<pre class="brush:php;toolbar:false">

<!--index.html-->



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery_1.4.2.js"></script> 



<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>



<!--cont.html-->



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery_1.4.2.js"></script>



<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;'>"+
      "这里替换内容</script>
"); }); $("#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("
"+ "这里的宽和高是含iframe的父级页面的宽和高,即当前浏览器的可视窗口大小(自定义)
可定义按钮来关闭此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(); });
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent: 关于php编码有关问题 Article suivant: phpmyadmin无法连接到mysql服务器1045解决方法

Articles Liés

Voir plus