javascript - 模态显示事件中的模糊内容

Question

我正在尝试更改我所有网站内容所在的类(包装器)，基本上当用户单击模式打开时，我将样式添加到类“wrapper”，我' 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;
}