Creating a blurred background effect when a React portal is presented

Question

Creating a blurred background effect when a React portal is presented

I have implemented React portals to display a modal popup after the form is submitted. However, I am facing an issue with blurring only the background while showing the modal, similar to what is shown in picture 2. Initially, I tried using

document.body.style.filter = "blur(5px)"

but it ended up blurring everything. My CSS for the modal and modal root closely resembles the code provided in the React documentation.


#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;
}

https://i.sstatic.net/k3A6u.png

https://i.sstatic.net/wJNnC.png

javascript html css reactjs modal-dialog

Answer 1

Answer №1

When you apply a blur filter to an element, all of its child elements will inherit that filter effect. Assuming your HTML structure is similar to the portal docs example below:

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

If this is the structure you have in place, then simply target the app-root and apply the filter like so:

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

Answer 2

When you apply a blur filter to an element, all of its child elements will inherit that filter effect. Assuming your HTML structure is similar to the portal docs example below:

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

If this is the structure you have in place, then simply target the app-root and apply the filter like so:

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

Answer 3

Answer №2

If you want to create a blurred background effect when your modal is open due to its fixed position, simply add this to the style of your modal body:

  backdrop-filter: blur(8px);

Alternatively, you can use:

  backdropFilter: blur(8px);

Implementing either of these options should achieve the desired result.

Answer 4

If you want to create a blurred background effect when your modal is open due to its fixed position, simply add this to the style of your modal body:

  backdrop-filter: blur(8px);

Alternatively, you can use:

  backdropFilter: blur(8px);

Implementing either of these options should achieve the desired result.

Answer 5

Answer №3

Is it possible to enclose the main content in a container div, apply a blur effect on that, and ensure the modal is positioned outside of the blurred div?

Answer 6

Is it possible to enclose the main content in a container div, apply a blur effect on that, and ensure the modal is positioned outside of the blurred div?

Creating a blurred background effect when a React portal is presented

Answer №1

Answer №2

Answer №3

Similar questions

Building a Formik-powered Autocomplete with React Material-UI and customized rendering choices

Checking the conditions and return statements within Jest testing framework

The compatibility between Babel 7 and the preset-es2015 is not very reliable

Tips on how to showcase a picture with the focus on the center by enlarging it within

Do we really need to use redux reducer cases?

The elements in the list are too large for the designated area on Internet Explorer and Chrome browsers on Mac computers

Using loops in Sass mixins causes errors

What is the reason behind the necessity of using setTimeout with a delay of at least 50ms for JS .focus()

When refreshing a page in Next.js, the loading indicator does not properly turn off

What is the best way to share an HTML element across multiple pages in Next.js?

Modify the color of the lower border and dropdown indicator in Material UI's Autocomplete feature

Mpdf does not support inline CSS rendering

Encountering issues with loading styles in Vue single file components

HTML unique flex wrapping

In the case of a PDF being in landscape orientation, the full width of the document is not utilized despite the width being set to

Switching the horizontal tab design from Bootstrap 3 to Bootstrap 4

How to assign attributes to multiple menu items in WordPress without using JavaScript

Displaying a <div> element within a :before pseudoelement

Using the columns property in CSS3 along with background-color

Vue chart not displaying data until the window is resized