时间戳

首页 > 解决方案 > 在 React 中打开模态时如何将模糊效果应用于背景？

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

问题描述

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

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

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

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

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

标签： cssreactjsmodal-dialog

解决方案

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

推荐阅读