使div出现并将整个html更改为较暗 [英] Make div appear and change the whole html to be darker

问题描述

我有一个div，当我点击一个按钮后，我想让div出现（我可以这样做），但我希望整个背景也变得更暗（这与叠加内联）。

我试过使用不透明度 - 我用jQuery改变了整个html的不透明度，即 $（'html'）.css（'opacity'， '-0.5'）; 并将div的不透明度改回正常，但由于某些原因，div的不透明度保持不变（0.5）。
我不太喜欢不透明，因为它实际上并不会使背景更暗（更轻）。

解决方案

HTML -

 < a id =some-buttonhref =＃>点击我< / a> 
< div id =overlay-back>< / div> 
< div id =overlay>< span>您的HTML GOES HERE< / span>< / div> 
  

CSS -

  html，body {
 width：100％; 
身高：100％; 
} 
＃overlay-back {
 position：absolute; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
背景：＃000; 
不透明度：0.6; 
 filter：alpha（opacity = 60）; 
 z-index：5; 
 display：none; 
} 
 
 #overlay {
 position：absolute; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 z-index：10; 
 display：none; 
 
  

JS -

< $（'＃c $ c $>'（'＃some-button'）。on（'click'，function（）{
$（'＃overlay，＃overlay-back'）。fadeIn 500）;
}）;

然后，只需将您的YouTube视频嵌入代码添加到叠加 div并将其设置为适当的样式，以便将其放在页面上的所需位置。

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

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 overlays).

I've tried using opacity - I change the opacity of the whole html with jQuery, i.e. $('html').css('opacity','-0.5'); and change back the opacity of the div to normal, but for some reason, the opacity of the div stays the same (0.5). I don't quite like the opacity since actually it doesn't make the background darker (rather lighter).

解决方案

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

Then just add your youtube video embed code to the overlay div and style it appropriately to put it where you want on the page.

Here is a demo: http://jsfiddle.net/EtHbf/1/

这篇关于使div出现并将整个html更改为较暗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！