我已经检查了覆盖全高度问题的一些答案,但是没有正确的答案.

如何制作覆盖图覆盖整个页面而不是部分内容,这很烦人.我的身高等于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();
});

解决方法:

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

这是css

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

HTML

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

希望这可以帮助.