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

user_3036789 0
Viewed 9193

I think the title is not easy to understand, What I mean is when we use UI library like Bootstrap, Material UI, etc... When we click the button to show modal, the background opacity except its modal is changed to dark.

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

You can see in above url when you click the button to show modal. The background changed like blur effect.

I don't use above library, I just want to make it myself. Below is my code, Can you give me some hints? I think I might to apply style to document, Is there any good idea?

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

reactjs modal-dialog css
2 Answers

You just need to wrap the <Modal /> with another div which will be the "overlay" and will has the dark background

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>

Working example: https://codesandbox.io/s/friendly-lake-ic9jx

If you want to place the modal exactly in the center, you can use 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;
`;
user_8631100

This can be done with CSS. Change the opacity level on other elements. Properties you may require would be filter and opacity Try Ant Design as you're using React JS. This has components prebuild with properties like visible to make background darker when some element is active.

user_95114300
Related