我有一个 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 视频嵌入代码添加到 overlay
div 并适当设置样式以将其放在页面上您想要的位置。
这是一个演示:http://jsfiddle.net/EtHbf/1/
关于javascript - 使 div 出现并将整个 html 更改为更暗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8460420/