How to create a popup component with all background blured/disabled?

May 10, 2022

I am building a react app.

I want to show a popup window in the center of screen in which user can give review to the product.

While showing that window how to prevent scrolling of background and disable all background such that if user clicks outside of that window(even on a button) only that window should disappear?

I want to do something like this:

I have not idea about how it is done.

Please suggest just some way of doing that or suggest some topics which can be used here.

>Solution :

To prevent background, pop a black div that overides entire window.

width: 100vw;
height: 100vh;
position: fixed;
z-index: 99;

in that div, place another div with your content to be displayed.

Here is a working example:

let myEl = document.getElementById("hideScreen")
//myEl.style.display = "block";

addEventListener("click", () => {
  myEl.style.display = "block";
})

#hideScreen {
   top:0; left: 0;
   width: 100%;
   height: 100%;
   position: fixed;
   background: rgba(50,50,50,0.9);
   
   display: none;
}
input {
   margin: 50vmin;
}

<body>
  Some text to be vanished.
  Click to activate.
  <div id="hideScreen">
    <input type="text" id="userReview" placeHolder="your review"></input>
  </div>
</body>