gpt4 book ai didi

javascript - 显示 React 门户时模糊背景

转载 作者:行者123 更新时间:2023-11-28 05:13:24 25 4
gpt4 key购买 nike

我正在使用 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;
}```

What I have so far

what I want it to look like

最佳答案

您模糊处理的元素的每个子元素都将应用该过滤器。由于您有与门户文档类似的代码,因此我假设您的 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)'

关于javascript - 显示 React 门户时模糊背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50748077/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com