Geek asks and answers

Full height overlay

I checked several answers to the problem with the full height of the overlay, but there are no correct answers.

How do you overlay to cover the entire page, not part of it, which is annoying. And I make the height equal to 100%.

The overlay is made in jquery, but obviously css can be made in the css file. But for the sake of simplicity ...:

$('.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();
});
+3
source share
5 answers

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>

hope this helps.

+4
source

Another way to perform an overlay, which can often overcome some of the unpleasant "gap" issues, is to use this absolute positioning trick:

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

which essentially will be attached to all sides of the viewport regardless of size:

example: http://jsfiddle.net/6DKgb/2/

, , .

+4
body, html { height: 100% }

bodyby default does not fill the entire vertical space of the screen. Thus, your overlay is 100% of the height of its parent, but it is not the height of the screen.

+2
source

Fix directly in magnific_popup.js updateSize function. Add the following:

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

try it too

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

More articles:


All Articles