使div出现并将整个html更改为更暗

Question

我有一个div,在我点击一个按钮后,我希望div出现(我可以做),但我希望整个背景也变得更暗(这是叠加的内联).

我尝试使用不透明度 - 我用jQuery $('html').css('opacity','-0.5');更改整个html 的不透明度,即将div的不透明度更改为正常,但由于某种原因,div的不透明度保持不变(0.5).我不太喜欢不透明度,因为它实际上并没有使背景更暗(更轻).

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

然后,只需将youtube视频嵌入代码添加到overlaydiv中,并将其设置为适当的样式,以便将其放在页面上的所需位置.

这是一个演示:http://jsfiddle.net/EtHbf/1/

Answer 2

现在可以比以前更容易完成.只需使用绝对的盒子阴影.

 #yourDIV {
   box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
 }