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

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:

click me 
 


 

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)