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

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/

Answer 2

The simplest thing I have seen to achieve it is this:

$("#overlay").css("-webkit-filter","blur(5px)");
$("#overlay").css("-moz-filter","blur(5px)");
$("#overlay").css("-o-filter","blur(5px)");
$("#overlay").css("-ms-filter","blur(5px)");
$("#overlay").css("filter","blur(5px)");
$("#overlay").css("pointer-events", "none");

On clicking a button we have to run above steps. "overlay" is the ID of div which we want to be blur. After successful execution of script, at the end we can do this to re-enable the div:

$("#overlay").removeAttr("style");

Answer 3

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

Answer 4

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

Answer 5

hi i changed the code of someone who posted here, even though this may be solved already here is the updated code of jasper

html:

<a id="some-button" href="#">click me</a> 
<div id="overlay-back"></div> 
<div id="overlay"><iframe src="http://www.youtube.com/embed/08DjMT-qR9g" width="340" 
height="250"></iframe><br><br><button id="close"><img    
src="http://icongal.com/gallery/image/89825/remove_close_button_x_delete.png" 
height="50"
width="50"></button></div> 

css:

html, body {
width  : 100%;
height : 100%;
}
#overlay button{
opacity:0.5;
}
#overlay button:hover{
opacity:1;   
}
#overlay-back { 
position   : absolute; 
text-align :center; 
width      : 100%; 
height     : 100%; 
background : #000; 
opacity    : 0.75; 
filter     : alpha(opacity=60); 
z-index    : 5;
display    : none;
}  
#overlay { 
position : absolute; 
text-align :center;
width    : 100%; 
height   : 100%; 
z-index  : 10;
display  : none;
} 

jquery:

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

i hope this might still help you and that this edit may be usefull to some people

added by me (close button,changed very little part of the css and used a youtube vid instead of nothing)

Answer 6

Here's another example of this behavior, in the demo: click the "watch video" link to fade in the video and screen dimmer divs (escape to fade out)

jsfiddle demo

CSS:

#screenDimmer,#video {display:none;position:absolute;}
#screenDimmer {top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;
    /* ie opacity */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);}
#video {top:50%;left:50%;margin-left:-240px;margin-top:-193px;}

HTML:

<div id="screenDimmer"></div>
<div id="video"><!-- embedded video here --></div>