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;
}```
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;
}```
3 Answers
Reset to default 9Every 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)'
Because your modal has fixed position, when your modal is open, to blur the background, add
backdrop-filter: blur(8px);
or
backdropFilter: blur(8px);
to the style of your modal body and that should do the job.
Can you wrap the body in an outter div, then blur that making sure your modal is outside your "blur" div?