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

Question

我觉得标题不太好理解，我的意思是当我们使用UI库，比如Bootstrap，Material UI等等...当我们点击按钮显示模态时，除了模态之外的背景不透明度都变成了黑暗。

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

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

我不使用上面的库，我只想自己制作。下面是我的代码，你能给我一些提示吗？我想我可能会应用风格document，有什么好主意吗？

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

Answer 1

你只需要用<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;
`;