如何使用 onclick Javascript 模糊背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24709046/
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
How to blur background using onclick Javascript?
提问by RazeByte
I want to open a small window (I have that part programmed) which displays in the screen, while the browser/document/background blurs and goes out of focus.
我想打开一个显示在屏幕上的小窗口（我对该部分进行了编程），而浏览器/文档/背景会模糊并失去焦点。
Example:
例子：
I want to have it so that when I press a button,
我想要它，当我按下一个按钮时，
<a onclick = "CODEHERE" href="blah">Click Here</a>
it blurs the background - What do I write in "CODEHERE."
它模糊了背景 - 我在“CODEHERE”中写了什么。
By the way, I am working in Shopify.
顺便说一下，我在 Shopify 工作。
Here is an example image of what I want it to look like:
这是我希望它看起来像的示例图像：
回答by Charles John Thompson III
If you would like to blur the background, you would need to add a css blur filter to the element that contains all of your normal content. In addition, it looks like you want to grey it out too.
如果您想模糊背景，则需要向包含所有正常内容的元素添加 css 模糊过滤器。此外，您似乎也想将其灰显。
Here is a link to the jFiddle: http://jsfiddle.net/edMa4/6/
这是 jFiddle 的链接：http: //jsfiddle.net/edMa4/6/
CSS
CSS
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
#overlay {
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(255,255,255,.8);
z-index: 999;
}
JavaScript
JavaScript
var myBlurFunction = function(state) {
/* state can be 1 or 0 */
var containerElement = document.getElementById('main_container');
var overlayEle = document.getElementById('overlay');
if (state) {
overlayEle.style.display = 'block';
containerElement.setAttribute('class', 'blur');
} else {
overlayEle.style.display = 'none';
containerElement.setAttribute('class', null);
}
};
to activate:
激活：
<a href="javascript:myBlurFunction(1);">Blur</a>
to disable:
禁用：
<a href="javascript:myBlurFunction(0);">No blur</a>
These are the basic things you'd need to blur and grey out the content of the main_container element - though you would need to make adjustments depending upon additional functionality you seek.
这些是您需要使 main_container 元素的内容模糊和变灰的基本内容 - 尽管您需要根据您寻求的其他功能进行调整。
回答by alessandrio
html
html
<div id='body'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<button>Click Here</button>
</div>
<div class="blur"></div>
<div id='sh'>
<button id="close">X</button>
GET MORE FROM MINI X STYLE
</div>
css
css
#body{
color:red;
background:grey;
}
.blur{
position:absolute;
top:0;left:0;right:0;bottom:0;
background:rgba(0,0,0,0.5);
display:none;
}
#sh{
position:absolute;
display:none;
top:50px;left:50px;bottom:50px;right:50px;
background:rgba(255,0,0,0.5);
}
javascript
javascript
window.onload = function() {
var pup = document.getElementsByTagName('button')[0];
pup.onclick=function(){
document.getElementById('sh').style.display="block";
document.getElementsByClassName('blur')[0].style.display="block";
};
var close = document.getElementById('close');
close.onclick=function(){
document.getElementById('sh').style.display="none";
document.getElementsByClassName('blur')[0].style.display="none";
};
};
