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

Question

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

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

当你点击按钮显示模态时，你可以看到上面url。背景变模糊了。

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

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

Answer 1

您只需要用另一个 div 包裹 <Modal />，这将是 "overlay" 并且具有深色背景

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 尝试 Ant Design 因为你正在使用 React JS。这具有预构建的组件，这些组件具有 visible 等属性，可以在某些元素处于活动状态时使背景变暗。

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

How to apply blur effect to background when modal is opened in React?

css

modal-dialog

reactjs