在React中打开模态时，如何将模糊效果应用于背景

Question

我认为标题不容易理解，我的意思是，当我们使用Bootstrap、Material UI等UI库时……当我们单击按钮显示模态时，除模态外的背景不透明度变为深色。

https://material-ui.com/components/modal/#modal

当你点击按钮显示模态时，你可以在上面的url中看到。背景像模糊效果一样变化。

我不使用上面的图书馆，我只想自己做。下面是我的代码，你能给我一些提示吗？我想我可以将样式应用于document，有什么好主意吗？

https://codesandbox.io/s/frosty-newton-icl0e

Answer 1

您只需要用另一个div包裹<Modal />，该div将是"覆盖层"，并具有深色背景

const ModalContainer = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5)
`;

<ModalContainer>
<Modal>I am a modal, I want to be special.</Modal>
</ModalContainer>

工作示例：https://codesandbox.io/s/friendly-lake-ic9jx

如果你想把模态准确地放在中心，你可以使用flexbox

const ModalContainer = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
`;
const Modal = styled.div`
background: #fff;
border: 1px solid #000;
padding: 20px;
min-height: 200px;
`;

Answer 2

这可以用CSS完成。更改其他元素的不透明度级别。您可能需要的属性是filter和opacity在使用React JS时尝试Ant Design。这使得组件预先构建了visible等属性，以便在某些元素处于活动状态时使背景更暗。