如何使用 onclick Javascript 模糊背景？答案

【问题标题】：How to blur background using onclick Javascript?如何使用 onclick Javascript 模糊背景？
【发布时间】：2014-07-12 11:06:38
【问题描述】：

我想打开一个显示在屏幕上的小窗口（我已经对这部分进行了编程），而浏览器/文档/背景模糊并失去焦点。

例子：

我想拥有它，这样当我按下按钮时，

 <a onclick = "CODEHERE" href="blah">Click Here</a>

它模糊了背景 - 我在“CODEHERE”中写了什么。

顺便说一句，我在 Shopify 工作。

这是我希望它看起来像的示例图像：

【问题讨论】：

基本上你想要做的是：How do I positioning a div based upon percentages with CSS 但模糊。
@Raze 你说的“模糊”是什么意思？模糊或只是略微透明的白色？
看图就知道了。
这不叫“模糊”，RazeByte。这将被称为“遮罩”（Photoshop 术语）或“不透明”（也是动词）。实际上，我认为您问题中的屏幕截图是“只是”带有蒙版/不透明视口画布的自定义警报之一。如果您要这样编辑您的标题/问题，我会“提高”您的问题，因为@CharlesJohnThompsonIII 的答案包含我见过的用于创建此类警报的最经济的代码。

标签： javascript html css

【解决方案1】：

如果您想模糊背景，则需要为包含所有正常内容的元素添加一个 css 模糊过滤器。此外，您似乎也想将其变灰。

这里是 jFiddle 的链接：http://jsfiddle.net/edMa4/6/

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

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);
    }
};

激活：

<a href="javascript:myBlurFunction(1);">Blur</a>

禁用：

<a href="javascript:myBlurFunction(0);">No blur</a>

这些是您需要模糊和灰显 main_container 元素内容的基本内容 - 尽管您需要根据您寻求的其他功能进行调整。

【讨论】：

内联 JS 是糟糕的代码设计的明显标志，它几乎不可维护。
@RokoC.Buljan 你只是跟着我来评论我的内联 JS 吗？
@RokoC.Buljan 请建议如何在不使用内联 JS 和不使用 jQuery 的情况下轻松说明简单的点击操作。谢谢。
不，我只是在关注活跃的问题。我会把它写给任何人。不要对 SO 个人采取任何行动。
@RokoC.Buljan 我不是，实际上觉得这很有趣。但说真的，你有什么替代方案可以作为快速插图的建议吗？

【解决方案2】：

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

#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

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";
};
};

【讨论】：