Css 在React中打开模式时，如何对背景应用模糊效果？

我认为这个标题不容易理解，我的意思是当我们使用UI库时，比如

Bootstrap

，

materialUI

，等等。。。当我们单击按钮显示模式时，背景不透明度（模式除外）将更改为暗

当您单击按钮以显示模式时，可以在上面的url中看到。背景像模糊效果一样改变

我不使用上面的库，我只想自己制作。下面是我的代码，你能给我一些提示吗？ 我想我可以将样式应用于

文档

，有什么好主意吗

---

您只需使用另一个div来包装

，该div将是“覆盖”，并具有黑色背景

const ModalContainer=styled.div`
位置：绝对位置；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,0.5）
`;

我是一个模态，我想变得特别。

工作示例：

如果要将模型精确放置在中心，可以使用flexbox

const ModalContainer=styled.div`
位置：绝对位置；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,0.5）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
`;
const Modal=styled.div`
背景：#fff；
边框：1px实心#000；
填充：20px；
最小高度：200px；
`;

这可以通过CSS实现。更改其他元素的不透明度级别。您可能需要的属性是

过滤器

和

不透明度

在使用React JS时尝试。这使组件预构建具有属性，如

可见

，以便在某些元素处于活动状态时使背景变暗

我有点晚了，但这里有另一种方法，也许你会觉得有用。