CODEWITHSUNDEEP
javascriptcssreactjs
Rush Buket
Rush Buket

Reputation: 90

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

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: enter image description here

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.

Upvotes: 0

Views: 1580

Answers (1)

lior bakalo
lior bakalo

Reputation: 450

  1. To prevent background, pop a black div that overides entire window.
width: 100vw;
height: 100vh;
position: fixed;
z-index: 99;
  1. 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>

Upvotes: 1

Related Questions