Make Div Appear And Change The Whole Html To Be Darker

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 overlays).

Solution 1:

HTML--

<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><span>YOUR HTML GOES HERE</span></div> 

CSS--

html, body {
    width  : 100%;
    height : 100%;
}
#overlay-back {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : #000;
    opacity    : 0.6;
    filter     : alpha(opacity=60);
    z-index    : 5;
    display    : none;
}

#overlay {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 10;
    display  : none;
} 

JS--

$('#some-button').on('click', function () {
    $('#overlay, #overlay-back').fadeIn(500);
});

Then just add your youtube video embed code to the overlay div and style it appropriately to put it where you want on the page.

Here is a demo: http://jsfiddle.net/EtHbf/1/

Solution 2:

This can be now done even easier than before. Just use absoluted box-shadow.

 #yourDIV {
   box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
 }

Solution 3:

First, for opacity, you don't set a negative number. $('html').css('opacity','1'); is solid and completely visible, and $('html').css('opacity','0'); is completely invisible. Anything in between (0.2, 0.5, 0.7) gets more visible the close it is to 1.

Second, to make the background darker you can do this:

1. Create a div that fills the screen
2. Set z-index on that div higher than all content
3. Set background to black and opacity to 0.5
4. Put youtube video in another div with a higher z-index than the div you just made with the black background

Solution 4:

You'd want a 'modal' dialog. It's basically accomplished by using an underlying div and a background set.

jQuery UI supports it here: http://jqueryui.com/demos/dialog/#modal , but you can see how they do it by inspecting.

Solution 5:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="play" href="javascript:void(0);">PLAY</a></p>

<div class="video_popup">
  <div class="popup_content">
    <a class="popup_close" href="javascript:void(0);"><img src="_/images/close.png"></a>
    <object width="560" height="315">
    <param name="movie" value="http://www.youtube.com/v/-pJcKCqxtAM?version=3&amp;hl=en_US&atuoplay=1">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <embed src="http://www.youtube.com/v/-pJcKCqxtAM?version=3&amp;hl=en_US&atuoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"/>
    </object>
  </div>
</div>