模态表演事件中的内容模糊

Question

我正在尝试更改所有网站内容都驻留的类（包装器），基本上，当用户单击打开模式时，我将样式添加到类“ 包装器”中， m使用.modal-backgrop.in CSS添加了另外一个CSS，它是模糊的，但是不起作用。

这是样式：

.modal-backdrop.in+#wrapper {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

Answer 1

如果我理解正确，则您正在尝试使模态模糊背后的内容变为现实。要获得这种效果，您可以尝试以下方法之一：

使用backdrop-filter

这仍然是experimental CSS property；但是，它非常简单，因为它将过滤器应用于半透明元素后面的内容。此方法的实现为：

.modal-backdrop.in + #wrapper {
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);
}

请注意，由于它仍处于实验阶段，因此不应在生产中使用。

页面本身的样式

使用JavaScript，您可以将类添加到#wrapper元素（例如.modal-open）中，然后对其进行适当的样式设置，或多或少像这样（请注意，如果删除了过滤器，请从模式中删除过滤器包装器内）：

JS

const wrapper = document.getElementById('wrapper');

function openModal () {
    // ...
    wrapper.classList.add('modal-open');
}

function closeModal () {
    // ...
    wrapper.classList.remove('modal-open');
}

CSS

#wrapper.modal-open {
    filter: blur(10px);
}

#modal {
    filter: none;
}