Javascript 使 div 出现并将整个 html 更改为更暗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8460420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make div appear and change the whole html to be darker
提问by user1073201
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).
我有一个 div，在单击按钮后，我希望 div 出现（我可以这样做），但我希望整个背景也变暗（这与叠加层内联）。
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).
我试过使用不透明度 - 我用 jQuery 改变了整个 html$('html').css('opacity','-0.5');的不透明度，即将 div 的不透明度改回正常，但由于某种原因，div 的不透明度保持不变（0.5）。我不太喜欢不透明度，因为实际上它不会使背景变暗（更亮）。
回答by Jasper
HTML--
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--
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--
JS--
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(500);
});
Then just add your youtube video embed code to the overlaydiv and style it appropriately to put it where you want on the page.
然后只需将您的 youtube 视频嵌入代码添加到overlaydiv 并适当地设置样式以将其放置在页面上您想要的位置。
Here is a demo: http://jsfiddle.net/EtHbf/1/
这是一个演示：http: //jsfiddle.net/EtHbf/1/
回答by freewheeler
This can be now done even easier than before. Just use absoluted box-shadow.
现在可以比以前更容易地做到这一点。只需使用绝对框阴影。
#yourDIV {
box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
}
回答by Andrew Hymanman
First, for opacity, you don't set a negative number. $('html').css('opacity','1');is solid and completely visible, and $('html').css('opacity','0');is completely invisible. Anything in between (0.2, 0.5, 0.7) gets more visible the close it is to 1.
首先，对于不透明度，您不要设置负数。 $('html').css('opacity','1');是实心的，完全可见，$('html').css('opacity','0');完全不可见。介于 (0.2, 0.5, 0.7) 之间的任何值越接近 1，就越明显。
Second, to make the background darker you can do this:
其次，要使背景变暗，您可以这样做：
- Create a div that fills the screen
- Set z-index on that div higher than all content
- Set background to black and opacity to 0.5
- Put youtube video in another div with a higher z-index than the div you just made with the black background
- 创建一个填充屏幕的 div
- 将该 div 上的 z-index 设置为高于所有内容
- 将背景设置为黑色，将不透明度设置为 0.5
- 将 youtube 视频放在另一个 div 中，其 z-index 比您刚使用黑色背景制作的 div 高
回答by Roko C. Buljan
// 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>回答by Vigrond
You'd want a 'modal' dialog. It's basically accomplished by using an underlying div and a background set.
您需要一个“模态”对话框。它基本上是通过使用底层 div 和背景集来完成的。
jQuery UI supports it here: http://jqueryui.com/demos/dialog/#modal, but you can see how they do it by inspecting.
jQuery UI 在此处支持它：http: //jqueryui.com/demos/dialog/#modal，但您可以通过检查来了解他们是如何做到的。
回答by user3224128
hi i changed the code of someone who posted here, even though this may be solved already here is the updated code of jasper
嗨，我更改了在这里发布的某人的代码，尽管这可能已经解决了 这里是 jasper 的更新代码
html:
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:
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);
});
i hope this might still help you and that this edit may be usefull to some people
我希望这仍然可以帮助您，并且此编辑可能对某些人有用
added by me (close button,changed very little part of the css and used a youtube vid instead of nothing)
由我添加（关闭按钮，更改了 css 的很小部分并使用了 youtube vid 而不是什么都没有）
回答by MikeM
Here's another example of this behavior, in the demo: click the "watch video" link to fade in the video and screen dimmer divs (escape to fade out)
这是此行为的另一个示例，在演示中：单击“观看视频”链接以淡入视频和屏幕调光器 div（退出以淡出）
CSS:
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:
HTML：
<div id="screenDimmer"></div>
<div id="video"><!-- embedded video here --></div>
回答by Yo Yo Saty Singh
The simplest thing I have seen to achieve it is this:
我见过的最简单的事情是这样的：
$("#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");
On clicking a button we have to run above steps. "overlay" is the ID of div which we want to be blur. After successful execution of script, at the end we can do this to re-enable the div:
单击按钮时，我们必须运行上述步骤。“overlay”是我们想要模糊的div的ID。成功执行脚本后，最后我们可以这样做以重新启用 div：
$("#overlay").removeAttr("style");
