オーバーレイがフルハイトではありません

Question

オーバーレイフルハイト問題についていくつかの回答を確認しましたが、適切な答えはありません。

どのようにページ全体を覆うようにオーバーレイを作成するのですか、それは迷惑です。そして私は高さを100％にしています。

オーバーレイはjqueryで作成されていますが、明らかにCSSはCSSファイルで実行できます。しかし、簡単のため...のために：

$('.overlay-test').click(function(e){ 
    $('#ovelay-box').load('overlay.html', function(response){ 
    $('#ovelay-box').css({ 
     "opacity": 0.5, 
     "background": "#333", 
     "height": $('body').height(), 
     "position": "absolute", 
     "width": "100%", 
     "top": 0, 
     "color": "#333", 
     "font-size": "26px", 
     "font-weight": "bold" 
    }); 

    $('.overlay').addClass('col-12-box').css({ 
     "width": "770px", 
     "left": "129px", 
     "background": "#fff", 
     "padding": "20px", 
     "position": "absolute", 
     "top": "50px" 
    }); 
}); 
e.preventDefault(); 
}); 

Answer 1

jqueryの

var docHeight = $(document).height(); 
var docWidth = $(document).width(); 

$("body").append("<div class='overlay'></div>"); 

$(".overlay").css({ 
    "height":docHeight, 
    "width":docWidth 
}); 

$(".showOverlay").click(function(e){ 
    e.preventDefault(); 
    $(".overlay").fadeTo("slow",0.8); 
}); 

THCのCSS

.overlay { 
    background:#000; 
    position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 

HTML

<a href="#" class="showOverlay">show overlay</a> 

は、このことができます願っています。

Answer 2

body, html { height: 100% } 

bodyデフォルトでは、すべての垂直画面領域に表示されません。したがって、オーバーレイは親の高さの100％ですが、それは画面の高さではありません。

Answer 3

しばしば厄介な「ギャップ」問題のいくつかを克服することができ、オーバーレイを行うための別の方法は、この絶対位置のトリックを使用することです：

本質的に関係なく、ビューポートのすべての側面にそれを添付します

#overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom:0; 
    background-color: red; 
} 

サイズの：

例：http://jsfiddle.net/6DKgb/2/

はまた、ブラウザによって身体に追加されますデフォルトのパディングを削除することを忘れないでください。

Answer 4

magnific_popup.js updateSize関数で直接修正されました。次の行を追加します。

mfp.bgOverlay.css({ 
    height: _document.height(), 
}); 

Answer 5

も

$(".overlay").css({ 
    position:fixed, 
    top:0px, 
    bottom:0px, 
    width:100% 
});