Make div appear and change the whole html to be darker

Question

I have a div and after I click a button, I would like the div to appear (which I can do), but I would like the whole background to become darker too (this is inline with overlay

Answer 1

// video lightbox
$('.video_popup').height($(document).height());
// GET WINDOW SCROLLtop OFFSET
var winScrT;
$(window).scroll(function() {
  winScrT = $(window).scrollTop();
});
$.getDocHeight = function() {
  var D = document;
  return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};


$('.play').click(function() {

  $('.video_popup').height($.getDocHeight);

  $('#popup').css({
    top: (winScrT + 15) + 'px'
  });

  $('.video_popup').fadeTo(0, 0).css({
    marginLeft: '0px'
  }).fadeTo(600, 0.6);
});

$('.popup_close, .video_popup').click(function() {
  $('.video_popup').fadeTo(600, 0, function() {
    $('.video_popup').hide();
  });
});

.video_popup {
  position: absolute;
  margin-left: -9000px;
  top: 0px;
  left: 0px;
  background: #000;
  width: 100%;
  z-index: 300;
}

.popup_content {
  position: relative;
  margin: 50px auto;
  width: 560px;
  color: #fff;
}

.popup_close {
  position: absolute;
  right: -55px;
  top: -25px;
  z-index: 2000;
}

PLAY