Estoy construyendo una aplicación de reacción.
Quiero mostrar una ventana emergente en el centro de la pantalla en la que el usuario pueda opinar sobre el producto.
Al mostrar esa ventana, ¿cómo evitar el desplazamiento del fondo y deshabilitar todo el fondo de modo que si el usuario hace clic fuera de esa ventana (incluso en un botón) solo esa ventana debería desaparecer?
No tengo idea de cómo se hace.
Por favor, sugiera alguna forma de hacerlo o sugiera algunos temas que puedan usarse aquí.
width: 100vw; height: 100vh; position: fixed; z-index: 99;
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>