我需要使用jQuery 1.6.2为现有的jsp页面创建一个请等待页面。我能够使div覆盖层正常工作,并在页面中心的模态窗口中显示动画,请稍等。但是,覆盖仅覆盖其中一个框架集,即中心框架。
html结构基本上是(为了清楚起见,我将遗漏很多):
... <frameset > <frame id="topMostFrame"> <frameset> <frame id="leftMostframe"> <frame id="centerMostFrame"> </frameset> </frameset> <noframes> </noframes> </body> </html>
JQUERY
function getTheOverlay(){ $(document).ready(function() { $("#loading-div-background").css({opacity: 0.5}); $("#loading-div-background").show(); //alert("In getOverlay!"); }); } function remove(){ $(document).ready(function() { $('#loading-div-background').hide(); }); }
HTML
<div id="loading-div-background" style="display:none" class="ui-widget"> <div id="loading-div" class="ui-corner-all"> <img style="height:80px;margin:50px;" src="/images/loading.gif" alt="Loading.."/> </div> </div>
CSS
#loading-div-background { display:none; position:absolute; top:0; left:0; background:gray; width:100%; height:100%; /* Next 2 lines IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); } #loading-div { width: 300px; height: 200px; background-color: #ffffff; text-align:center; position:absolute; left: 50%; top: 50%; margin-left:-150px; margin-top: -100px; }
我尝试移动html以将其加载到我的jquery函数中,但未在IE8中显示叠加层。我也有时间让IE8与覆盖层本身一起工作,但是使用上面的CSS可以解决此问题。
我需要禁用左侧框架上的链接,这可能是我将要使用的方法,否则将其覆盖。是的,我知道框架不好,但这就是我的工作目标。
我无法使覆盖图覆盖其他框架集并覆盖整个页面。我读到这与框架集是不可能的,尽管我猜测可能有解决方法。但是,当我使用警报进行调试时,覆盖层覆盖了整个页面。
我的问题是:为什么要使用警报使覆盖层覆盖所有内容?即使使用框架集,我还能做些其他事情来获得相同的效果吗?
我遇到了同样的问题,这就是我发现对我有用的。
框架基本上是一个窗口对象。有关窗口的所有规则都适用于框架。div属于保存在窗口内的文档。由于文档无法离开其窗口,因此div也无法离开其窗口。您正在要求在浏览器级别进行控制,但是所允许的只是在文档级别进行控制。
但是,您可以对 iframe 而不是 frameset 进行DIV 。
更新:
以我的朋友为例,我花了一些时间解决它,但实际上,StackOverflow对我有很大帮助,所以我觉得我必须把这个例子放在这里来帮助其他人。
这是页面容器的html,它包含一个iframe,该iframe将请求您要覆盖的页面框架集。
<head> <style type="text/css"> html, body#mybcontainer_body{margin:0px;padding:0px;border:none;height:100%;width:100%;} #mybcontainer_div{position:absolute;top:0px;bottom:0px;left:0px;right:0px;} #mybcontainer_iframe{position:absolute;top:0%;left:0%;height:100%;width:100%;} </style> </head> <body id="mybcontainer_body" > <div id="mybcontainer_dialog" style="display:none;">Some Text Here</div> <div id="mybcontainer_div"><iframe id="mybcontainer_iframe" border="0" frameborder="0" scrolling="no" noresize="noresize" src="page-two-contain-frameset"></iframe></div> </body>
致以我的问候