Question

我使用React门户在表单提交后创建模式弹出窗口。我想模糊背景，并在图片2中显示模态。我在第一张图片中使用了document.body.style.filter = "blur(5px)，但它模糊了一切。模态和模态根的CSS（我的代码几乎与门户的React文档相同）

```
#modal-root {
  position: relative;
  z-index: 999;
}
.modal {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  z-index: 99999;
}```

Answer 1

您模糊的元素的每个子项都将应用该过滤器。既然你有类似于门户网站文档的代码，那么我将假设你的html结构是这样的

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

如果是这种情况，则将过滤器应用于app-root aka ...

document.getElementById('app-root').style.filter = 'blur(5px)'

Answer 2

因为你的模态是固定的，所以当你的模态打开时，要模糊背景，添加

  backdrop-filter: blur(8px);

或

  backdropFilter: blur(8px);

你的模态主体的风格，这应该可以完成工作。

Answer 3

你可以将身体包裹在一个外面的div中，然后模糊，确保你的模态在你的模糊之外＆＃34;模糊＆＃34; DIV？

显示React门户时模糊背景

3 个答案: