4

既存の jsp ページに jQuery 1.6.2 を使用して、しばらくお待ちくださいページを作成する必要があります。ページの中央にあるモーダル ウィンドウで待機アニメーションとともに、div オーバーレイを機能させることができました。ただし、オーバーレイはフレームセットの 1 つ、中央のフレームのみをカバーします。

HTML構造は基本的に次のとおりです（わかりやすくするために多くを省略しています）：

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

Jクエリ

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

jquery 関数でロードするように html を移動しようとしましたが、IE8 ではオーバーレイが表示されませんでした。また、IE8 でオーバーレイ自体を動作させることもできましたが、上記の CSS を使用して修正しました。

左フレームのリンクを無効にする必要があります。これはおそらく使用するアプローチであるか、オーバーレイでそれらをカバーします。はい、私はフレームが悪いことを知っていますが、それは私が仕事をするために与えられたものです.

オーバーレイを他のフレームセットに重ねてページ全体を覆うことができません。フレームセットでこれを行うことは不可能であると読みましたが、回避策があると思います。ただし、デバッグ目的でアラートを使用すると、オーバーレイがページ全体を覆います。

私の質問は、オーバーレイがすべてをカバーするアラートを使用しているのはなぜですか? フレームセットを使用しても、同じ効果を得るために他にできることはありますか?

4

2 に答える 2

4

私はこれと同じ問題に直面しましたが、これが私にとってうまくいったことがわかりました。

フレームは基本的にウィンドウ オブジェクトです。ウィンドウに関するすべてのルールがフレームに適用されます。div は、ウィンドウ内に保持されているドキュメントに属します。ドキュメントはそのウィンドウを離れることができないため、div はそのウィンドウを離れることはできません。ブラウザーのレベルでの制御を求めていますが、許可されているのはドキュメントのレベルでの制御だけです。

ただし、フレームセットではなく、 iframeに対して DIV を実行できます。

アップデート：

この例を例にとると、私はそれを解決するのに時間がかかりましたが、実際には、StackOverflow は私を大いに助けてくれました。

これは page-container の html で、オーバーレイしたい page-frameset を要求する 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 に答える