当弹出窗口可见时创建 css 和 jquery 淡入淡出/模糊背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17363922/
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
Creating a css and jquery fade/blur background when popup is visible
提问by Nicola Conee
I have looked at other questions and had no luck trying to integrate other answers to my own code.
我查看了其他问题，但没有尝试将其他答案集成到我自己的代码中。
At the moment, when the mouse hovers a slide down appears and when you click on the image the popup appears. I just need to fade out the background when this popup is in view.
目前，当鼠标悬停时会出现向下滑动，当您单击图像时会出现弹出窗口。当这个弹出窗口出现时，我只需要淡出背景。
I have created a jsfiddle to try and demonstrate what my code currently looks like.
我创建了一个 jsfiddle 来尝试演示我的代码当前的样子。
I'm trying to create a fade/dimmed effect on the entire page when the popup is visible, which will then disappear when the popup is closed.
当弹出窗口可见时，我试图在整个页面上创建淡入淡出/变暗的效果，然后在弹出窗口关闭时消失。
I have created overlay as the style to display behind the popup but still no luck.
我已经创建了叠加作为显示在弹出窗口后面的样式，但仍然没有运气。
I have tried attaching multiple classes to the function but it breaks the code and no popup appears.
我尝试将多个类附加到该函数，但它破坏了代码并且没有出现弹出窗口。
This is my .overlay css:
这是我的 .overlay css：
.overlay{
background-image: url(http://dummyimage.com/600x400/000/000);
position:absolute;
top:0;
left:0;
width:100%;
z-index:100;
display:none;
text-align:left;
}
.toggledDiv {
height: 0px;
overflow: hidden;
z-index:10;
width: 130px;
padding-left:5px;
padding-right:5px;
margin-left: 15px;
background-color:white;
box-shadow: 5px 5px 5px #333;
}
This is the function that I created from a tutorial explaining how to do this:
这是我从解释如何执行此操作的教程中创建的函数：
// blur background
$(".overlay").css("height", $(document).height());
$(".toggleLink").click(function(){
$(".overlay").fadeIn();
return false;
});
$(window).bind("resize", function(){
$(".overlay").css("height", $(window).height());
});
This is my fiddle
这是我的小提琴
Any ideas?
有任何想法吗？
回答by xec
There is a lot of code posted in the question (and even more in the demo) that doesn't seem to have anything to do with the question being asked. This is more or less all you need for a simple overlay;
问题中发布了很多代码（在演示中甚至更多）似乎与所提出的问题没有任何关系。这或多或少是简单叠加所需的全部内容；
css
css
.overlay {
position:fixed;
display:none;
/* color with alpha channel */
background-color: rgba(0, 0, 0, 0.7); /* 0.7 = 70% opacity */
/* stretch to screen edges */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
html
html
Make sure this is a child (direct descendant) of <body>, or that there are no positioned ancestors. (The term "positioned" refers to an element with a positionvalue other than static)
确保这是 的孩子（直接后代）<body>，或者没有定位的祖先。（术语“定位”是指具有position除 之外的值的元素static）
<div class="overlay"></div>
javascript
javascript
Place inside dom ready event or place at end of <body>
放置在 dom 就绪事件内或放置在结束时 <body>
// rather than "body", you will want to tweak this selector
$("body").click(function() {
$(".overlay").toggle(); // show/hide the overlay
});
Here's a demo including a popup with the overlay: http://jsfiddle.net/5aWhE/19/
这是一个演示，包括一个带有叠加层的弹出窗口：http: //jsfiddle.net/5aWhE/19/
回答by ykadaru
Blurring can be done like this:
模糊可以这样完成：
.body {
-webkit-filter: blur(10px);
filter: blur(10px);
}
Now you just need jQuery to toggle the blur when the pop-up is shown.
现在您只需要 jQuery 在弹出窗口显示时切换模糊。
