ページのサイズを変更するときにdivのサイズを変更する

Question

jqueryを使用してdivにオーバーレイを配置しているときに、私のサーバーが自動でjsonテーブルに戻るのを待っています（2つのタブがあります。 1つにポストすると、サーバーの応答からのJSONデータを使用してテーブルが作成されます）。

これはうまく動作しているようです。
しかし、画面のサイズを変更すると、オーバーレイは同じサイズのままです。
これはいいです。

誰かがウィンドウを縮小または拡大すると、そのオーバーレイdivのサイズを変更する必要があります。
私は、スタックオーバーフローのためにここに投稿することを含め、いくつかの異なることを試しました。

また、私のdivオーバーレイのサイズをオーバーレイ機能内の$(window).resize関数にアタッチしようとしました。

は基本的にtop、left、widthとheight CSSがdiv.outerWidth()、outerHeight()、left、topプロパティに属性を設定します。

これはうまくいかないようです。

アイデア？私は

 $('<div id="overlay">').css({ 
     position: 'absolute', 
     opacity: 0.2, 
     top : $div.offset().top, 
     left : $div.offset().left, 
     width : $div.offset().width, 
     height : $div.outerHeight(), 
     background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center' 
    }).hide().appendTo('body'); 

います何のため

CODEあなたが見ることができるように、私はかなりjavascript関数の内部で、私のCSSのすべての作業を行います。皆さんのようにスタイルシートでCSSのすべてをやってみて、私のdivをDOMに追加して隠すだけだと思います。私はそれを試してみましょう。

Answer 1

よくある質問スタックオーバーフローファン。私は最近、オーバーレイをdivにオーバーレイしてからサイズを計算するのではなく、正しいdivにオーバーレイを貼り付けるだけで問題を解決しました。私が指摘する微妙な変化があります。

function MRNSearchInternals() 
{ 
    //debugger; 
    var form = $("#MRNSearch"); 
    $div = $("#TabView1"); 
    var srlzdform = form.serialize(); 
    var PopID = <% =PopID %>; 
    var options = []; 
    var $url = $("#target").attr("action"); 
    $('<div id="overlay">').css({ 
     position: 'absolute', 
     opacity: 0.2, 
     top : $div.offset().top, 
     left : $div.offset().left, 
     width : $div.outerWidth(), 
     height : $div.outerHeight(), 
     background: 'grey url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center' 
    }).hide().appendTo($div);  

    $("#overlay").fadeIn(); 
    $.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data) 
    {     
     DisplayDemographicSearch(data); 
     $("#overlay").fadeOut('slow', function() { 
      $("#overlay").remove(); 
     }); 
    }); 
} 

以前は、「body」にオーバーレイdivを付けました。今私は以前divをつかんだdivにアタッチしています... $ div ...私はなぜそれがうまくいったのか知っていますが、オーバーレイはウィンドウのサイズに合わせて拡大縮小します。その人たちの洞察は？この問題を解決しただけでなく、なぜ問題が解決されたのかを知りたいので、次回より情報に基づいた決定を下すことができます。ご意見ありがとうございます。

Answer 2

width: 100%;とheight: 100%;をオーバーレイディビジョンに使用します。

幅は問題ではなく、そのまま動作します。
高さはやや難しく、オーバーレイdivの親を既知の幅にする必要があります。

html, body { 
    height: 100%; 
} 

、その後、オーバーレイdivの上：だからオーバーレイのdivと仮定すると、以下が必要となりますbodyの直接の子です。 position: fixedは、モバイルデバイスとうまく動作しないことを

.overlay { 
    position: fixed; 
    background: rgba(0,0,0,0.2); 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
} 

Here's an Example

注：

---

別の可能性は、divの上で次のように設定することです。

Answer 3

純粋なHTML/CSSソリューションはどうですか？

<div id="overlay"></div> 

<style type="text/css"> 
    #overlay { 
     position: fixed; 
     left: 0; 
     top: 0; 
     width: 100%; 
     height: 100%; 

     background: #000000; 
     background: rgba(0, 0, 0, 0.5); 
    } 
</style> 

（backgroundプロパティは、CSS3のサポート付きとなしのデバイスのために2回指定され、唯一のデモ。オーバーレイ用）

Answer 4

：高さbodyタグの後

body: position: relative 
overlay: position: absolute, width: 100%, top:0, left: 0 

とスクリプト例えば、隠された： はあなたがオーバーフローを使用してはいけないDOMのルートにそれを置く

$('overlay-selector').height($(document).height()) 

100 CSSを使った％heightは$（window）.height（）を意味するので、スクリプトを使う必要があります。