我有一个div，我点击一个按钮后，我想div出现（我可以做），但我希望整个背景也变得更暗（这是重叠内联）。使div出现，并将整个HTML更改为更暗
我试过使用不透明度 - 我改变了整个HTML与jQuery的不透明度，即$('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/
如果向下滚动 – JVK
，它将只覆盖窗口的可视部分而不是整个页面@jvk如果您希望覆盖层即使在滚动时覆盖视口，也可以使用'position：fixed'。如果你想让它变成用户不能滚动（页面可以滚动到'position：fixed'元素的后面），那么当你显示覆盖层时，你可以使'html'和'body'元素'hidden'溢出：'html，body {overflow：hidden}'。如果你这样做，你可能需要保存滚动位置，你可以通过设置'body'元素的高度，然后将'overflow'属性设置为'hidden'。例如'$（'body'）.css（{height：$（'body'）。height（），overflow：'hidden'}）' – Jasper
[Here]（http://jsfiddle.net/eys3d/741/ ）和[这里]（http://gasparesganga.com/labs/jquery-loading-overlay/）带有**更多覆盖效果**。希望有帮助。 – stom
你会想要一个'模态'对话框。它基本上是通过使用底层div和背景集来完成的。
jQuery UI在此支持：http://jqueryui.com/demos/dialog/#modal，但您可以通过检查来了解它们是如何实现的。
你是说没有简单的快捷方式来做到这一点？我认为这是几行的jquery/html代码 – user1073201
$（'＃modal'）。dialog（{modal：true}）;使用该库时非常简单。 – Vigrond
首先，对于不透明度，您不设置负数。 $('html').css('opacity','1');是固体并且完全可见，并且$('html').css('opacity','0');是完全不可见的。任何中间（0.2，0.5，0.7）得到更多的可见关闭它是1
其次，使背景暗，你可以这样做：
1.我希望html的内容仍然可见，但只是较暗。 2-4我已经做到了。 – user1073201
确实我用0.5（而不是-0.5）。抱歉。 – user1073201
// 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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="play" href="javascript:void(0);">PLAY</a></p>
<div class="video_popup">
<div class="popup_content">
<a class="popup_close" href="javascript:void(0);"><img src="_/images/close.png"></a>
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>该演示似乎没有在IE9中做任何事情。 – Jasper
对于更长的页面，非常重要的行$（'。video_popup'）。height（$（document）.height（））。再次感谢 – user1073201
@Jasper感谢！ （P.S.我没有IE9测试但感谢TOT的LOT，请欣赏它） –
下面是这种行为的另一个例子，在演示：点击“看视频”链接在视频和屏幕亮度调节器的div褪色（逃避淡出）
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：
<div id="screenDimmer"></div>
<div id="video"><!-- embedded video here --></div>
现在可以比以前更容易完成了。只需使用绝对盒子阴影。
#yourDIV {
box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
}
而不是5000px值，你可以使用100vmax更适应性。 –
您好我改变了人谁张贴在这里的代码，即使这可能可以解决已经在这里是碧玉
HTML的更新代码：
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><iframe src="http://www.youtube.com/embed/08DjMT-qR9g" width="340"
height="250"></iframe><br><br><button id="close"><img
src="http://icongal.com/gallery/image/89825/remove_close_button_x_delete.png"
height="50"
width="50"></button></div>
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");
在点击一个按钮，我们有上述步骤运行。 “覆盖”是我们想要模糊的div的ID。脚本的成功执行后，在最后我们能够做到这一点，以重新启用DIV：
$("#overlay").removeAttr("style");
如果div有一个黑色的背景再高不透明度值将背景暗，而低级的将使它更轻。 – Pointy