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