4

我需要使用 jQuery 1.6.2 为现有的 jsp 页面创建一个请等待页面。我能够让 div 覆盖工作，以及页面中心模式窗口中的请稍候动画。但是，覆盖仅覆盖其中一个框架集，即中间的一个。

html结构基本上是（为了清楚起见，我省略了很多）：

...
<frameset >
  <frame id="topMostFrame">
  <frameset>
    <frame id="leftMostframe">
    <frame id="centerMostFrame">
  </frameset>
</frameset>
<noframes>
</noframes>
</body>
</html>

查询

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 已修复。

我需要禁用左框架上的链接，这可能是我将使用的方法，或者用覆盖覆盖它们。是的，我知道框架很糟糕，但这就是我被赋予的工作。

我无法让叠加层覆盖其他框架集并覆盖整个页面。我读过这不可能用框架集做，尽管我猜可能有一个解决方法。但是，当我出于调试目的使用警报时，覆盖会覆盖整个页面。

我的问题是：为什么使用警报使覆盖覆盖一切？即使使用框架集，我还能做些什么来获得相同的效果吗？

4

2 回答 2

4

我遇到了同样的问题，这就是我发现对我有用的问题。

框架基本上是一个窗口对象。所有关于窗口的规则都适用于框架。div 属于保存在窗口内的文档。由于文档不能离开它的窗口，所以 div 不能离开它的窗口。您要求在浏览器级别进行控制，但您被允许的只是在文档级别进行控制。

但是，您可以在iframe上执行 DIV，但不能在frameset上执行。

更新：

拿这个例子我的朋友，我花了一些时间来解决它，但真的，StackOverflow对我帮助很大，所以我觉得我必须把这个例子放在这里帮助别人。

这是页面容器的 html，它包含一个 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>

致以我的问候

于 2013-02-20T05:35:13.713 回答
0

在 Cairo Solutions 的解释之后，我最终在框架集上使用了显示/隐藏。这确实有效，但我不相信用一个 div 覆盖多个框架集是可能的。

这是我使用的代码：

$('#divName a',top.frames['leftframe'].document).show();
$('#divName a',top.frames['leftframe'].document).hide();

然后我只是使用我创建的 div 作为主框架集中的叠加层来与它结合使用，从而解决了问题。

于 2013-02-20T19:27:40.827 回答