0
335
ViewsHow 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:
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.
·
Juan Pablo Isaza
1 answers
Answer question0
- 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>
·
Juan Pablo Isaza
Report
Answer question