CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1073201
user1073201

Reputation: 229

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

I've tried using opacity - I change the opacity of the whole html with jQuery, i.e. $('html').css('opacity','-0.5'); and change back the opacity of the div to normal, but for some reason, the opacity of the div stays the same (0.5). I don't quite like the opacity since actually it doesn't make the background darker (rather lighter).

Upvotes: 13

Views: 41200

Answers (8)

Yo Yo Saty Singh
Yo Yo Saty Singh

Reputation: 549

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

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

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

Upvotes: 2

freewheeler
freewheeler

Reputation: 1356

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

Upvotes: 14

user3224128
user3224128

Reputation: 11

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)

Upvotes: 1

MikeM
MikeM

Reputation: 27405

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>

Upvotes: 1

Jasper
Jasper

Reputation: 76003

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/

Upvotes: 28

Andrew Jackman
Andrew Jackman

Reputation: 13966

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

Upvotes: 4

Vigrond
Vigrond

Reputation: 8198

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.

Upvotes: 2

Related Questions