Obtaining page maximum height in Jquery

I don't know if I am specific enough,

But I created a lightbox-style fadein background but it appears to me that the background won't reach the very bottom of the page. So when I scroll, the white background appears again.

Here is the demo: http://jsbin.com/limiyisi/1/

HTML

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

<a  style="position:absolute;" href="#" class="btn btn-default" data-toggle="active">    
Button </a>
<div class="ex-height"></div>

CSS

#overlay {
position:absolute;
width: 100%;
height : 100%;
background: #000;
top: 0;
left: 0;

opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}


.backdrop {
opacity: 0.4 !important;
}

.ex-height {
height: 1204px;
}

Jquery

$(function() {

function toggle() {
   $('#overlay').toggleClass('backdrop');
   }

 $('[data-toggle="active"]').click(toggle);

 });

Thanks for any helpful advice!

Problem courtesy of: Wiley Ng

Solution

Set the height of the overlay to the document's height:

$('#overlay').toggleClass('backdrop').height($(document).height());

Solution courtesy of: Elliot Bonneville

Discussion

demo

$(function() {

  function toggle() {
    var pageHeight = $('html, body').innerHeight();
    $('#overlay').toggleClass('backdrop').height( pageHeight  ); 
  }

  $('[data-toggle="active"]').click(toggle);

});

Discussion courtesy of: Roko C. Buljan

Change the #overlay to

#overlay {
position:absolute;
background: #000;
top: 0;
left: 0;
bottom: 0;
right: 0;

opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}

If that doesn't quite work - try changing the bottom and right values to 100%

Discussion courtesy of: jeff

This recipe can be found in it's original form on Stack Over Flow .

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章