Make Div Appear And Change The Whole Html To Be Darker

June 27, 2023 Post a Comment

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

<aid="some-button"href="#">click me</a><divid="overlay-back"></div><divid="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: 0px0px1px5000pxrgba(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:

Create a div that fills the screen
Set z-index on that div higher than all content
Set background to black and opacity to 0.5
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 OFFSETvar winScrT;
$(window).scroll(function() {
  winScrT = $(window).scrollTop();
});
$.getDocHeight = function() {
  var D = document;
  returnMath.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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p><aclass="play"href="javascript:void(0);">PLAY</a></p><divclass="video_popup"><divclass="popup_content"><aclass="popup_close"href="javascript:void(0);"><imgsrc="_/images/close.png"></a><objectwidth="560"height="315"><paramname="movie"value="http://www.youtube.com/v/-pJcKCqxtAM?version=3&amp;hl=en_US&atuoplay=1"><paramname="allowFullScreen"value="true"><paramname="allowscriptaccess"value="always"><embedsrc="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>

Html5 Academy