0
198
Views¿Cómo crear un componente emergente con todo el fondo borroso/deshabilitado?
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?
Quiero hacer algo como esto: 
No tengo idea de cómo se hace.
Por favor, sugiera alguna forma de hacerlo o sugiera algunos temas que puedan usarse aquí.
·
Juan Pablo Isaza
1 answers
Answer question0
- Para evitar el fondo, haga estallar un div negro que anula toda la ventana.
width: 100vw; height: 100vh; position: fixed; z-index: 99;- en ese div, coloque otro div con su contenido para que se muestre.
Aquí hay un ejemplo de trabajo:
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