时间戳

首页 > 解决方案 > 模态显示事件上的模糊内容

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

问题描述

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

这里是风格：

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

标签： javascripthtmlcsstwitter-bootstrap-3bootstrap-modal

解决方案

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

使用backdrop-filter

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

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

推荐阅读