Bloque PopUp
Esta ventana popup que te presentamos es un cuadro que se abre centrado sobre la página actual. No se construye con nuevas ventanas de navegación (objetos window), sino que se trata de un bloque div colocado con posicionamiento absoluto sobre el resto de la página.
No es un cuadro modal, al puslar en cualquier parte se va a cerrar. Aunque es fácil convertirlo en modal, es decir, que cierre el acceso al resto de la pagína.
Se ha procurado minimizar el uso de Javascript.
Se trata de una herramienta muy simple que puede usarse para mostrar un mensaje de aviso, una imagen, o cualquier otro elmento que se quiera mantener oculto y solo sea necesario en un determinado momento.
Un ejemplo puede ser el habitual mensaje de aviso de cookies o puede ser una forma de ver en grande una imagen de un catálogo, o puede usrase para un formulario emergente.
El código HTML
Para construir la ventana usamos dos bloques:
- Bloque con clase panel e id= aviso encargado de centrar el cuadro con el mensaje en su interior y mostrarlo
- Bloque div con el mensaje o contenido que mostramos al abrir este popup.
Para mostrar la ventana se ha usado un botón, cada aplicación utilizará su propio método para hacer saltar el cuadro popup
<button onclick="document.getElementById('aviso').setAttribute('data-on','on')"> Mostrar aviso </button>
<div class="panel" id="aviso" data-on="off" onclick="this.setAttribute('data-on','off')"> <div> Esto es un panel de comunicación <p>(Pulsar para cerrar)</p> </div> </div>
El botón ejecuta una pequeña instrucción javascript que localiza el panel popup (que tiene un id="aviso") y le pone el atributo data-set a on. Con esto se el bloque aviso se hace visible (gracias al CSS)
Dentro del panel contendor del mensaje hay otro evento que ejecuta una intrucción Javascript que pone el atributo data-se a off, con lo que el panel se ocula (de nuevo gracias al CSS).
Se ha hecho de esta manera para minimizar el código de la aplicación.
Estilos CSS
El panel contenedor del cuadro que se quiere mostrar tiene unas dimensiones del 100% en alto y ancho para ocupar la pantalla. Está en posición absoluta y se muestra como un bloque flex, con ello su contendio aparecerá centrar en vertical y horizontal en toda la ventana.
La propiedad z-index: -1 hace que este popup no sea modal, el resto de la página es visible y accesible, por ello al pulsar con el ratón en cualquier parte de la página el cuadro se cerrará.
El panel con el aviso también es un bloque flex para centrar su contenido en vertical y horizontal. Este cuadro tiene el tamaño que qieras ponerle, en el ejemplo está a 400px de alto y ancho.
Las ultmas dos clases las he elegido para que la aparición y desaparición del cuadro sea gradual. Esto se consigue gracias a la propiedad transition de la clase .panel
@charset "utf-8";
.panel{
position: absolute;
top:0;
left:0;
display:flex;
justify-content: center;
align-items: center;
height:100%;
width: 100%;
transition: transform 300ms;
z-index:-1;
}
.panel div{
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
background: beige;
width: 400px;
height:400px;
z-index:1000;
}
.panel[data-on='on']
{
transform: scale(1);
}
.panel[data-on='off']
{
transform: scale(0);
}