使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时变得更加明显。
其次，为了使背景更暗，你可以这样做：
- 创建一个填充屏幕的div
- 将该div上的z-index设置为高于所有内容
- 将背景设置为黑色，将不透明度设置为0.5
- 将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; }
以下是此行为的另一个示例，在演示中：点击“观看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");