显示React Portal时背景模糊
wil*_*air 1 html javascript css modal-dialog reactjs
我正在使用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;
}```
小智 7
因为您的模式具有固定位置，所以当您的模式打开时，要模糊背景，请添加
backdrop-filter: blur(8px);
或者
backdropFilter: blur(8px);
适合您模态身体的风格，这应该可以完成工作。
模糊元素的每个子元素都将应用该滤镜。由于您具有与门户网站文档相似的代码，因此我将假设您的html结构是这样的
<html>
<body>
<div id="app-root"></div>
<div id="modal-root"></div>
</body>
</html>
如果是这种情况，则将过滤器应用到应用程序根目录，也就是...
document.getElementById('app-root').style.filter = 'blur(5px)'
| 归档时间： |
|
| 查看次数： |
2257 次 |
| 最近记录： |