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

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

Answer 2

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.