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

进行覆盖的另一种方法通常可以克服一些令人讨厌的“间隙”问题，就是使用这种绝对定位技巧：

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

无论大小如何，它都将基本上将其附加到视口的所有侧面：

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

另外，请不要忘记删除浏览器添加到正文中的默认填充。

Answer 3

body, html { height: 100% }

默认情况下，

body未填充所有垂直屏幕空间。因此，您的叠加层是其父级高度的100％，但这不是屏幕高度。

Answer 4

直接修复magnific_popup.js updateSize函数。添加以下内容：

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

Answer 5

试试这个

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

覆盖不是全高

5 个答案: