如何使用onclick Javascript模糊背景？

Question

我想打开一个小窗口（我有那个编程的部分）显示在屏幕上，而浏览器/文档/背景模糊并失焦。

示例：

我想拥有它，以便当我按下按钮时，

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

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

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

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

Answer 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元素内容所需的基本内容 - 尽管您需要根据所寻求的其他功能进行调整。

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