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

Question

我有一个 div，在我点击一个按钮后，我希望该 div 出现(我可以做到)，但我也希望整个背景变得更暗(这与叠加层内联)。

我试过使用不透明度 - 我用 jQuery 更改了整个 html 的不透明度，即 $('html').css('opacity','-0.5'); 并更改将 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 视频嵌入代码添加到 overlay div 并适当设置样式以将其放在页面上您想要的位置。

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