React-modal: Option to change the blur of the modal background

Created on 20 Aug 2018  路  6Comments  路  Source: reactjs/react-modal

It would be great if there was a option to override the blur effect of the modal background.

question styling
Source
picture p0k8h

Most helpful comment

Anyone still looking for a solution to this, blur on the modal overlay style doesn't work is because the blur effect applies to all child elements of the selector the blur is on. The modal is a child of the overlay so the modal gets blurred.
You want to blur a sibling element to your root which is styled to be 100% width and height, then blur that. The element must appear before the modal.
You could obviously play around with the various callbacks on the modal to do this, but a very simple way is to have a css selector along these lines: 

body.ReactModal__Body--open {
    overflow: hidden;
    position: relative;

    #root {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        filter: blur(2px);
    }
}

(If you gave the modal a different value for bodyOpenClassName be sure to match the name in the first line above)

This works if you're using the standard html template:

<body>
    <div id="root"></div>
    <!-- ReactModal portal appears here with default settings allowing the blur to work -->
</body>

When the modal is open, the above scss will kick in and give you the blur you want. You can still apply your background color to the modal config as per normal.
Experiment around with the above, but for a quick working solution try the above.

picture MartinWebDev on 20 Oct 2019
❤3 👍1

All 6 comments

Hi @parwat08, if you mean css blur effect, you can either change the style property of the modal or use a custom css class (see overlayClassName).

Reference: react-modal documetation on Styles

diasbruno picture diasbruno on 1 Sep 2018

I use the custom overlayClassName adding the style: filter: blur(5px); but it blurs the modal, don't the background.

gabrielizalo picture gabrielizalo on 25 Jul 2019
😕6

Anyone still looking for a solution to this, blur on the modal overlay style doesn't work is because the blur effect applies to all child elements of the selector the blur is on. The modal is a child of the overlay so the modal gets blurred.
You want to blur a sibling element to your root which is styled to be 100% width and height, then blur that. The element must appear before the modal.
You could obviously play around with the various callbacks on the modal to do this, but a very simple way is to have a css selector along these lines: 

body.ReactModal__Body--open {
    overflow: hidden;
    position: relative;

    #root {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        filter: blur(2px);
    }
}

(If you gave the modal a different value for bodyOpenClassName be sure to match the name in the first line above)

This works if you're using the standard html template:

<body>
    <div id="root"></div>
    <!-- ReactModal portal appears here with default settings allowing the blur to work -->
</body>

When the modal is open, the above scss will kick in and give you the blur you want. You can still apply your background color to the modal config as per normal.
Experiment around with the above, but for a quick working solution try the above.

MartinWebDev picture MartinWebDev on 20 Oct 2019
❤3 👍1

@MartinWebDev's solution is great, but it doesn't work with the built in transition classes, because ReactModal__Body--open stays on the <body> even while ReactModal__Overlay--before-close is on the overlay. To get around this I'm manually adding a before-close class to the body:

<Modal
  ...
  closeTimeoutMS={closeTimeoutMS}
  onRequestClose={() => {
    ...
    document.body.classList.add('ReactModal__Body--before-close');
    setTimeout(
      () =>
        document.body.classList.remove('ReactModal__Body--before-close'),
      closeTimeoutMS,
    );
  }}
/>

#root {
  transition: all var(--transition-time-fast) var(--timing-f);
  filter: none;
}

body.ReactModal__Body--open > #root {
  filter: blur(2px);
}

body.ReactModal__Body--before-close > #root {
  filter: none;
}
mngyuan picture mngyuan on 29 Apr 2020
👍2 ❤1

@MartinWebDev's solution is great, but it doesn't work with the built in transition classes, because ReactModal__Body--open stays on the <body> even while ReactModal__Overlay--before-close is on the overlay. To get around this I'm manually adding a before-close class to the body:

<Modal
  ...
  closeTimeoutMS={closeTimeoutMS}
  onRequestClose={() => {
    ...
    document.body.classList.add('ReactModal__Body--before-close');
    setTimeout(
      () =>
        document.body.classList.remove('ReactModal__Body--before-close'),
      closeTimeoutMS,
    );
  }}
/>

#root {
  transition: all var(--transition-time-fast) var(--timing-f);
  filter: none;
}

body.ReactModal__Body--open > #root {
  filter: blur(2px);
}

body.ReactModal__Body--before-close > #root {
  filter: none;
}

Yes indeed, I did say that it was only a basic solution, so anything you can add on top is awesome 馃榾

MartinWebDev picture MartinWebDev on 4 Jun 2020
🎉2 👍1

backdropFilteris working for me :
```
const customeStyle = {
content : {
top : 'auto',
left : 'auto',
right : 'auto',
bottom : '0',
marginRight : 'auto',
width:'100%'

    },
    overlay: {
        backdropFilter: 'blur(5px)',

this is for bg color you wont

        backgroundColor:'rgba(253,255,255,0.44)',
    },
} ;

...
style={customeStyle}
/>
```

ehssamimi picture ehssamimi on 2 Feb 2021
👍3
Was this page helpful?
0 / 5 - 0 ratings

Related issues

istok20 picture istok20  路  3Comments
c0debreaker picture c0debreaker  路  4Comments
davidmfoley picture davidmfoley  路  3Comments
jrock17 picture jrock17  路  4Comments
shmekla picture shmekla  路  3Comments