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

我有一个嵌入YouTube的div.点击某些按钮后,我想要显示div(我知道如何实现这一点),但是我希望整个背景变得更暗. (这是与重叠式内联.)
我尝试使用透明度 – 我用 jquery改变整个html的透明度,即$(‘html’).css(‘opacity’,’ – 0.5′);并将div的不透明度恢复正常,但由于某种原因,div的不透明度保持不变(0.5).
我不喜欢不透明度,因为实际上它不会使背景更暗(更轻).

任何想法如何使背景更暗？

解决方法

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视频嵌入代码添加到叠加层,并适当地对其进行风格,将其放在页面上您想要的位置.

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

原文地址：https://www.jb51.cc/js/154845.html