如何在框架集上放置div覆盖? [英] How to put a div overlay over framesets?
问题描述
我需要为现有的jsp页面使用jQuery 1.6.2创建一个请稍候的页面.我能够使div覆盖层正常工作，并在页面中心的模态窗口中显示一个动画，请稍等.但是，覆盖层仅覆盖其中一个框架集，即中心框架.
I have a requirement to create a please wait page using jQuery 1.6.2 for an existing jsp page. I was able to get the div overlay to work, along with an please wait animation in a modal window in the center of the page. However, the overlay only covers one of the framesets, the center one.
html的结构基本上是(为了清楚起见，我将省略很多内容):
The html structure is basically (I'm leaving a lot out for clarity):
...
<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可以解决此问题.
I tried moving the html to load in my jquery function, but it didn't display the overlay in IE8. I also had a time getting IE8 to work with the overlay itself, but that is fixed using the CSS above.
我需要禁用左侧框架上的链接，这可能是我将使用的方法，否则将其覆盖.是的，我知道镜架不好，但这就是我所要使用的.
I need to disable the links on the left frame, which is probably the approach I'll use or else cover them with the overlay. Yes I know frames are bad, but that is what I was given to work with.
我无法使覆盖图覆盖其他框架集并覆盖整个页面.我读到这与框架集是不可能的，尽管我猜测可能有解决方法.但是，当我使用警报进行调试时，覆盖层覆盖了整个页面.
I can't get the overlay to go over the other framesets and cover the entire page. I've read that this is impossible to do with framesets, although I'm guessing there could be a workaround. However, when I use an alert for debugging purposes, the overlay covers over the entire page.
我的问题是:为什么要使用警报使覆盖层覆盖所有内容?即使使用框架集，我还能做些其他事情来获得相同的效果吗?
My question is: why is using an alert making the overlay cover everything? Is there something else I could do to get the same effect, even with the framesets?
推荐答案
我也遇到了同样的问题，这就是我发现对我有用的.
I faced this same problem and this is what I found that worked for me.
框架基本上是一个窗口对象.有关窗口的所有规则都适用于框架. div属于保存在窗口内的文档.由于文档无法离开其窗口，因此div也无法离开其窗口.您正在要求在浏览器级别进行控制，但您所允许的只是在文档级别进行控制.
A frame is basically a window object. All the rules about windows apply to frames. A div belongs to a document which is held inside a window. Since the document can't leave its window, the div can't leave its window. You're asking for control at the level of the browser, but all you are permitted is control at the level of the document.
但是，您可以在 iframe 上进行DIV，但不能在 frameset 上进行DIV.
However, you may do a DIV over an iframe but not a frameset.
更新:
以这个例子为我的朋友，我花了一些时间解决它，但实际上，StackOverflow对我有很大帮助，所以我觉得我必须把这个例子放在这里来帮助其他人.
Take this example my friend, It took some time for me to solve it, but really , StackOverflow has helped me a lot, so I feel that I must put this example here to help others.
这是页面容器的html，它包含一个iframe，该iframe将请求您要覆盖的页面框架集.
This the html of page-container, it contains an iframe that will request the page-frameset that you are wanting to overlay.
<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>
我的问候
这篇关于如何在框架集上放置div覆盖?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
