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

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

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

HTML–

 click me 
YOUR HTML GOES HERE

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

然后,只需将youtubevideo嵌入代码添加到overlay div中,并将其设置为适当的样式,以便将其放在页面上的所需位置。

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

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

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

首先,对于不透明度,您不设置负数。 $('html').css('opacity','1'); 是完全可见的, $('html').css('opacity','0'); 是完全看不见的。 介于两者之间的任何东西(0.2,0.5,0.7)在接近1时变得更加明显。

其次,为了使背景更暗,你可以这样做:

  1. 创建一个填充屏幕的div
  2. 将该div上的z-index设置为高于所有内容
  3. 将背景设置为黑色,将不透明度设置为0.5
  4. 将YouTubevideo放在另一个具有比使用黑色背景制作的div更高的z-index的div中

你想要一个’模态’对话框。 它基本上是通过使用底层div和背景集来完成的。

jQuery UI在这里支持它: http : //jqueryui.com/demos/dialog/#modal ,但你可以通过检查看到他们是如何做到的。

 // video lightbox $('.video_popup').height($(document).height()); // GET WINDOW SCROLLtop OFFSET var winScrT; $(window).scroll(function() { winScrT = $(window).scrollTop(); }); $.getDocHeight = function() { var D = document; return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight)); }; $('.play').click(function() { $('.video_popup').height($.getDocHeight); $('#popup').css({ top: (winScrT + 15) + 'px' }); $('.video_popup').fadeTo(0, 0).css({ marginLeft: '0px' }).fadeTo(600, 0.6); }); $('.popup_close, .video_popup').click(function() { $('.video_popup').fadeTo(600, 0, function() { $('.video_popup').hide(); }); }); 
 .video_popup { position: absolute; margin-left: -9000px; top: 0px; left: 0px; background: #000; width: 100%; z-index: 300; } .popup_content { position: relative; margin: 50px auto; width: 560px; color: #fff; } .popup_close { position: absolute; right: -55px; top: -25px; z-index: 2000; } 
  

PLAY

以下是此行为的另一个示例,在演示中:点击“观看video”链接淡入video和屏幕调光器divs(逃避淡出)

jsfiddle演示

CSS:

 #screenDimmer,#video {display:none;position:absolute;} #screenDimmer {top:0;left:0;width:100%;height:100%;background:#000;opacity:.5; /* ie opacity */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);} #video {top:50%;left:50%;margin-left:-240px;margin-top:-193px;} 

HTML:

 

嗨我改变了发布在这里的人的代码,即使这可能已经解决了,这里是更新的jasper代码

HTML:

 click me 


CSS:

 html, body { width : 100%; height : 100%; } #overlay button{ opacity:0.5; } #overlay button:hover{ opacity:1; } #overlay-back { position : absolute; text-align :center; width : 100%; height : 100%; background : #000; opacity : 0.75; filter : alpha(opacity=60); z-index : 5; display : none; } #overlay { position : absolute; text-align :center; width : 100%; height : 100%; z-index : 10; display : none; } 

jQuery的:

 $('#some-button').on('click', function () { $('#overlay, #overlay-back').fadeIn(1000); }); $('#close').on('click',function(){ $('#overlay,#overlay-back').fadeOut(1000); }); 

我希望这可能仍然可以帮助你,这个编辑可能对某些人有用

由我添加(关闭按钮,改变了很小的部分css并使用了youtube vid而不是没有)

我看到实现它的最简单的事情是这样的:

 $("#overlay").css("-webkit-filter","blur(5px)"); $("#overlay").css("-moz-filter","blur(5px)"); $("#overlay").css("-o-filter","blur(5px)"); $("#overlay").css("-ms-filter","blur(5px)"); $("#overlay").css("filter","blur(5px)"); $("#overlay").css("pointer-events", "none"); 

点击按钮,我们必须在上面的步骤上运行。 “overlay”是我们想要模糊的div的ID。 成功执行脚本后,最后我们可以重新启用div:

 $("#overlay").removeAttr("style");