模态显示事件上的模糊内容

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