Blurring background when React portal is displayed

I’m using React portals to create a modal popup after form submission. I would like to blur just the background and to show the modal like in picture 2. I used document.body.style.filter = "blur(5px) in the first picture but it blurs everything. CSS for the modal and modal root (my code is almost identical to the React docs for portals)

```
#modal-root {
  position: relative;
  z-index: 999;
}
.modal {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  z-index: 99999;
}```

What I have so far

what I want it to look like

Answer

Every child of the element that you blur will have that filter applied. Since you have similar code to the portal docs then im going to assume your html structure is something like this

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

if this is the case then apply the filter to app-root aka…

document.getElementById('app-root').style.filter = 'blur(5px)'

Leave a Reply

Your email address will not be published. Required fields are marked *